{"id":311,"date":"2020-05-22T12:16:11","date_gmt":"2020-05-22T04:16:11","guid":{"rendered":"https:\/\/wp.dj47.top\/?p=311"},"modified":"2021-10-20T16:16:18","modified_gmt":"2021-10-20T08:16:18","slug":"css%e6%ba%a2%e5%87%ba%e6%98%be%e7%a4%ba%e7%9c%81%e7%95%a5%e5%8f%b7","status":"publish","type":"post","link":"https:\/\/www.djlog.cn\/?p=311","title":{"rendered":"CSS\u6ea2\u51fa\u663e\u793a\u7701\u7565\u53f7"},"content":{"rendered":"

\u5982\u679c\u5b9e\u73b0\u5355\u884c\u6587\u672c\u7684\u6ea2\u51fa\u663e\u793a\u7701\u7565\u53f7\u540c\u5b66\u4eec\u5e94\u8be5\u90fd\u77e5\u9053\u7528text-overflow:ellipsis\u5c5e\u6027\u6765\uff0c\u5f53\u7136\u8fd8\u9700\u8981\u52a0\u5bbd\u5ea6width\u5c5e\u6765\u517c\u5bb9\u90e8\u5206\u6d4f\u89c8\u3002<\/p>\n

\u5b9e\u73b0\u65b9\u6cd5\uff1a<\/span><\/p>\n

overflow: hidden;\r\ntext-overflow:ellipsis;\r\nwhite-space: nowrap;<\/code><\/pre>\n
\u6548\u679c\u5982\u56fe\uff1a<\/span>
\"dome1\"<\/div><\/p>\n
 <\/p>\n
 <\/p>\n
\u4f46\u662f\u8fd9\u4e2a\u5c5e\u6027\u53ea\u652f\u6301\u5355\u884c\u6587\u672c\u7684\u6ea2\u51fa\u663e\u793a\u7701\u7565\u53f7\uff0c\u5982\u679c\u6211\u4eec\u8981\u5b9e\u73b0\u591a\u884c\u6587\u672c\u6ea2\u51fa\u663e\u793a\u7701\u7565\u53f7\u5462\u3002<\/p>\n
\u63a5\u4e0b\u6765\u91cd\u70b9\u8bf4\u4e00\u8bf4\u591a\u884c\u6587\u672c\u6ea2\u51fa\u663e\u793a\u7701\u7565\u53f7\uff0c\u5982\u4e0b\u3002<\/p>\n
\u5b9e\u73b0\u65b9\u6cd5\uff1a<\/span><\/p>\n
display: -webkit-box;\r\n-webkit-box-orient: vertical;\r\n-webkit-line-clamp: 3;\r\noverflow: hidden;<\/code><\/pre>\n
\u6548\u679c\u5982\u56fe\uff1a<\/span>
\"dome2\"<\/div><\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
\u9002\u7528\u8303\u56f4\uff1a<\/span>
\u56e0\u4f7f\u7528\u4e86WebKit\u7684CSS\u6269\u5c55\u5c5e\u6027\uff0c\u8be5\u65b9\u6cd5\u9002\u7528\u4e8eWebKit\u6d4f\u89c8\u5668\u53ca\u79fb\u52a8\u7aef\uff1b<\/p>\n
\u6ce8\uff1a<\/p>\n
    \n
  1. \n
    -webkit-line-clamp\u7528\u6765\u9650\u5236\u5728\u4e00\u4e2a\u5757\u5143\u7d20\u663e\u793a\u7684\u6587\u672c\u7684\u884c\u6570\u3002\u00a0\u4e3a\u4e86\u5b9e\u73b0\u8be5\u6548\u679c\uff0c\u5b83\u9700\u8981\u7ec4\u5408\u5176\u4ed6\u7684WebKit\u5c5e\u6027\u3002\u5e38\u89c1\u7ed3\u5408\u5c5e\u6027\uff1a<\/p>\n<\/li>\n
  2. \n
    display:\u00a0-webkit-box;\u00a0\u5fc5\u987b\u7ed3\u5408\u7684\u5c5e\u6027\u00a0\uff0c\u5c06\u5bf9\u8c61\u4f5c\u4e3a\u5f39\u6027\u4f38\u7f29\u76d2\u5b50\u6a21\u578b\u663e\u793a\u00a0\u3002<\/p>\n<\/li>\n
  3. \n
    -webkit-box-orient\u00a0\u5fc5\u987b\u7ed3\u5408\u7684\u5c5e\u6027\u00a0\uff0c\u8bbe\u7f6e\u6216\u68c0\u7d22\u4f38\u7f29\u76d2\u5bf9\u8c61\u7684\u5b50\u5143\u7d20\u7684\u6392\u5217\u65b9\u5f0f\u00a0\u3002<\/p>\n<\/li>\n<\/ol>\n
    \u5b9e\u73b0\u65b9\u6cd5\uff1a<\/span><\/p>\n
    p{\r\n    position: relative; \r\n    line-height: 20px; \r\n    max-height: 40px;\r\n    overflow: hidden;\r\n}\r\np::after\r\n{\r\n    content: \"...\"; \r\n    position: absolute; \r\n    bottom: 0; \r\n    right: 0; \r\n    padding-left: 40px;\r\n    background: -webkit-linear-gradient(left, transparent, #fff 55%);\r\n    background: -o-linear-gradient(right, transparent, #fff 55%);\r\n    background: -moz-linear-gradient(right, transparent, #fff 55%);\r\n    background: linear-gradient(to right, transparent, #fff 55%);\r\n}<\/code><\/pre>\n
    \u6548\u679c\u5982\u56fe\uff1a<\/span>
    \"dome3\"<\/div><\/p>\n
     <\/p>\n
     <\/p>\n

    \u9002\u7528\u8303\u56f4\uff1a<\/span>
    \u8be5\u65b9\u6cd5\u9002\u7528\u8303\u56f4\u5e7f\uff0c\u4f46\u6587\u5b57\u672a\u8d85\u51fa\u884c\u7684\u60c5\u51b5\u4e0b\u4e5f\u4f1a\u51fa\u73b0\u7701\u7565\u53f7,\u53ef\u7ed3\u5408js\u4f18\u5316\u8be5\u65b9\u6cd5\u3002<\/p>\n
    \u6ce8\uff1a<\/p>\n
      \n
    1. \n
      \u5c06height\u8bbe\u7f6e\u4e3aline-height\u7684\u6574\u6570\u500d\uff0c\u9632\u6b62\u8d85\u51fa\u7684\u6587\u5b57\u9732\u51fa\u3002<\/p>\n<\/li>\n
    2. \n
      \u7ed9p::after\u6dfb\u52a0\u6e10\u53d8\u80cc\u666f\u53ef\u907f\u514d\u6587\u5b57\u53ea\u663e\u793a\u4e00\u534a\u3002<\/p>\n<\/li>\n
    3. \n
      \u7531\u4e8eie6-7\u4e0d\u663e\u793acontent\u5185\u5bb9\uff0c\u6240\u4ee5\u8981\u6dfb\u52a0\u6807\u7b7e\u517c\u5bb9ie6-7\uff08\u5982\uff1a<span>\u2026<span\/>\uff09\uff1b\u517c\u5bb9ie8\u9700\u8981\u5c06::after\u66ff\u6362\u6210:after\u3002<\/p>\n<\/li>\n<\/ol>\n
      \n","protected":false},"excerpt":{"rendered":"
      \u5982\u679c\u5b9e\u73b0\u5355\u884c\u6587\u672c\u7684\u6ea2\u51fa\u663e\u793a\u7701\u7565\u53f7\u540c\u5b66\u4eec\u5e94\u8be5\u90fd\u77e5\u9053\u7528text-overflow:ellipsis\u5c5e\u6027\u6765\uff0c\u5f53\u7136\u8fd8\u9700 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[23],"class_list":["post-311","post","type-post","status-publish","format-standard","hentry","category-6","tag-css"],"_links":{"self":[{"href":"https:\/\/www.djlog.cn\/index.php?rest_route=\/wp\/v2\/posts\/311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.djlog.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.djlog.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.djlog.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.djlog.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=311"}],"version-history":[{"count":0,"href":"https:\/\/www.djlog.cn\/index.php?rest_route=\/wp\/v2\/posts\/311\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.djlog.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.djlog.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.djlog.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}