{"id":2150,"date":"2018-12-17T11:07:51","date_gmt":"2018-12-17T03:07:51","guid":{"rendered":"https:\/\/www.baishitou.cn\/?p=2150"},"modified":"2018-12-17T11:07:51","modified_gmt":"2018-12-17T03:07:51","slug":"divcss%e8%b6%85%e5%87%ba%e9%95%bf%e5%ba%a6%e6%96%87%e5%ad%97%e8%87%aa%e5%8a%a8%e9%9a%90%e8%97%8f%e6%88%96%e7%94%a8%e7%9c%81%e7%95%a5%e5%8f%b7%e8%a1%a8%e7%a4%ba","status":"publish","type":"post","link":"https:\/\/www.baishitou.cn\/2150.html","title":{"rendered":"divcss\u8d85\u51fa\u957f\u5ea6\u6587\u5b57\u81ea\u52a8\u9690\u85cf\u6216\u7528\u7701\u7565\u53f7\u8868\u793a"},"content":{"rendered":"<p>\u6211\u4eec\u5728\u505a\u7ad9\u7684\u65f6\u5019\uff0c\u4e00\u4e9b\u533a\u57df\u7684\u6807\u9898\u6587\u5b57\u662f\u4e0d\u80fd\u6362\u884c\u7684\uff0c\u4f8b\u5982\u9996\u9875\u5217\u8868\u7684\u6587\u7ae0\u6807\u9898\uff0c\u56e0\u4e3a\u5e03\u5c40\u662f\u56fa\u5b9a\u7684\uff0c\u6362\u884c\u4f1a\u6253\u4e71\u5e03\u5c40\uff0c\u4ece\u800c\u4f7f\u7f51\u9875\u4ea7\u751f\u9519\u4f4d\u3002\u56e0\u6b64\uff0c\u6211\u4eec\u9700\u8981\u4e00\u884c\u4e00\u6bb5\u6587\u5b57\uff0c\u8d85\u51fa\u884c\u5bbd\u7684\u6587\u5b57\u7528\u7701\u7565\u53f7\u8868\u793a\u6216\u8005\u76f4\u63a5\u53bb\u6389\u4e0d\u7528\u7701\u7565\u53f7\u4ee3\u66ff\u3002\u770b\u770b\u4e0b\u56fe\u4e2d\u7684\u5b9e\u4f8b\u3002<\/p>\n<p><a href=\"https:\/\/www.baishitou.cn\/wp-content\/uploads\/2018\/12\/bst20181217095439.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2151\" src=\"https:\/\/www.baishitou.cn\/wp-content\/uploads\/2018\/12\/bst20181217095439.jpg\" alt=\"\" width=\"324\" height=\"430\" srcset=\"https:\/\/www.baishitou.cn\/wp-content\/uploads\/2018\/12\/bst20181217095439.jpg 324w, https:\/\/www.baishitou.cn\/wp-content\/uploads\/2018\/12\/bst20181217095439-226x300.jpg 226w\" sizes=\"auto, (max-width: 324px) 100vw, 324px\" \/><\/a><\/p>\n<p>\u4e0a\u56fe\u663e\u793a\uff0c\u7ad9\u957f\u70ed\u8bc4\u5217\u8868\u91cc\u9762\u7684\u6587\u7ae0\u6807\u9898\uff0c\u8d85\u51fa\u884c\u5bbd\u7528\u7701\u7565\u53f7\u8868\u793a\u3002\u672c\u6587\u6211\u4eec\u5c31\u6765\u770b\u770b\u5982\u4f55\u7528css\u6765\u5b9e\u73b0\u7684\u3002<\/p>\n<h2><strong>css\u5b9e\u73b0\u8d85\u51fadiv\u957f\u5ea6\u7528\u7701\u7565\u53f7\u8868\u793a<\/strong><\/h2>\n<pre class=\"pure-highlightjs\"><code class=\"\">&lt;div style=\"overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:150px;\" title=\"divcss\u8d85\u51fa\u957f\u5ea6\u6587\u5b57\u81ea\u52a8\u9690\u85cf\u6216\u7528\u7701\u7565\u53f7\u8868\u793a\"&gt;divcss\u8d85\u51fa\u957f\u5ea6\u6587\u5b57\u81ea\u52a8\u9690\u85cf\u6216\u7528\u7701\u7565\u53f7\u8868\u793a&lt;\/div&gt;<\/code><\/pre>\n<p>\u4e0a\u5217\u4ee3\u7801\u5404\u6807\u7b7e\u89e3\u91ca\uff1a<\/p>\n<p><strong>overflow: hidden<br \/>\n<\/strong>overflow \u5c5e\u6027\u89c4\u5b9a\u5f53\u5185\u5bb9\u6ea2\u51fa\u5143\u7d20\u6846\u65f6\u53d1\u751f\u7684\u4e8b\u60c5\u3002\u8fd9\u4e2a\u5c5e\u6027\u5b9a\u4e49\u6ea2\u51fa\u5143\u7d20\u5185\u5bb9\u533a\u7684\u5185\u5bb9\u4f1a\u5982\u4f55\u5904\u7406\u3002hidden \u8868\u793a\u5185\u5bb9\u4f1a\u88ab\u4fee\u526a\uff0c\u5e76\u4e14\u526a\u6389\u7684\u5185\u5bb9\u662f\u4e0d\u53ef\u89c1\u7684\u3002<\/p>\n<p><strong>white-space: nowrap<br \/>\n<\/strong>\u89c4\u5b9a\u6587\u672c\u4e0d\u8fdb\u884c\u6362\u884c\u3002white-space \u5c5e\u6027\u8bbe\u7f6e\u5982\u4f55\u5904\u7406\u5143\u7d20\u5185\u7684\u7a7a\u767d\u3002nowrap \u8868\u793a\u6587\u672c\u4e0d\u4f1a\u6362\u884c\uff0c\u6587\u672c\u4f1a\u5728\u5728\u540c\u4e00\u884c\u4e0a\u7ee7\u7eed\uff0c\u76f4\u5230\u9047\u5230 &lt;br&gt; \u6807\u7b7e\u4e3a\u6b62\u3002<\/p>\n<p><strong>text-overflow: ellipsis<br \/>\n<\/strong>text-overflow \u5c5e\u6027\u89c4\u5b9a\u5f53\u6587\u672c\u6ea2\u51fa\u5305\u542b\u5143\u7d20\u65f6\u53d1\u751f\u7684\u4e8b\u60c5\u3002ellipsis \u8868\u793a\u663e\u793a\u7701\u7565\u7b26\u53f7\u6765\u4ee3\u8868\u88ab\u4fee\u526a\u7684\u6587\u672c\u3002<\/p>\n<p><strong>width:100px<br \/>\n<\/strong>width \u5c5e\u6027\u8bbe\u7f6ediv\u7684\u957f\u5ea6\u3002<\/p>\n<h2><strong>css\u5b9e\u73b0\u8d85\u51fadiv\u957f\u5ea6\u7684\u6587\u5b57\u81ea\u52a8\u9690\u85cf<\/strong><\/h2>\n<pre class=\"pure-highlightjs\"><code class=\"\">&lt;div style=\"overflow: hidden; white-space: nowrap; text-overflow: clip;width:100px;\" title=\"divcss\u8d85\u51fa\u957f\u5ea6\u6587\u5b57\u81ea\u52a8\u9690\u85cf\u6216\u7528\u7701\u7565\u53f7\u8868\u793a\"&gt;divcss\u8d85\u51fa\u957f\u5ea6\u6587\u5b57\u81ea\u52a8\u9690\u85cf\u6216\u7528\u7701\u7565\u53f7\u8868\u793a&lt;\/div&gt;\r\n<\/code><\/pre>\n<p>\u4e0a\u9762\u4ee3\u7801\uff0ctext-overflow\u7684\u5c5e\u6027\u503c\u662fclip\uff0c\u800c\u4e0d\u662fellipsis\u3002clip\u00a0\u8868\u793a\u4fee\u526a\u6587\u672c\u7684\u610f\u601d\u3002<\/p>\n<p><a href=\"https:\/\/www.baishitou.cn\/wp-content\/uploads\/2018\/12\/bst20181217110417.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2152\" src=\"https:\/\/www.baishitou.cn\/wp-content\/uploads\/2018\/12\/bst20181217110417.jpg\" alt=\"\" width=\"410\" height=\"131\" srcset=\"https:\/\/www.baishitou.cn\/wp-content\/uploads\/2018\/12\/bst20181217110417.jpg 410w, https:\/\/www.baishitou.cn\/wp-content\/uploads\/2018\/12\/bst20181217110417-300x96.jpg 300w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/p>\n<h2><strong>overflow\u5b9e\u73b0\u7528\u6eda\u52a8\u6761\u67e5\u770b\u5176\u4f59\u6587\u5b57<\/strong><\/h2>\n<p>\u5728\u6d4f\u89c8\u7f51\u9875\u65f6\u6709\u65f6\u4f1a\u770b\u5230\u8fd9\u6837\u4e00\u79cd\u60c5\u51b5\uff0c\u5c31\u662f\u533a\u57df\u957f\u5ea6\u56fa\u5b9a\u800c\u5185\u5bb9\u53ea\u7528\u4e00\u884c\u663e\u793a\uff0c\u4f46\u4e0d\u662f\u526a\u6389\u800c\u662f\u53ef\u4ee5\u901a\u8fc7\u6eda\u52a8\u6761\u6eda\u52a8\u6765\u67e5\u770b\u5176\u4f59\u5185\u5bb9\u3002\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><a href=\"https:\/\/www.baishitou.cn\/wp-content\/uploads\/2018\/12\/bst20181217110812.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2153\" src=\"https:\/\/www.baishitou.cn\/wp-content\/uploads\/2018\/12\/bst20181217110812.jpg\" alt=\"\" width=\"291\" height=\"98\" \/><\/a><\/p>\n<p>\u8fd9\u662f\u600e\u4e48\u5b9e\u73b0\u7684\u5462\uff1f\u5176\u5b9e\u8fd8\u662f\u4f7f\u7528\u4e86overflow\u7684\u5c5e\u6027\uff0c\u53ea\u4e0d\u8fc7\u6b64\u5c5e\u6027\u4e0d\u662fhidden\u800c\u662fscroll\u4e86\u3002\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre class=\"pure-highlightjs\"><code class=\"\">&lt;div style=\"overflow: scroll; white-space: nowrap; text-overflow: clip;width:200px;\" title=\"divcss\u8d85\u51fa\u957f\u5ea6\u6587\u5b57\u81ea\u52a8\u9690\u85cf\u6216\u7528\u7701\u7565\u53f7\u8868\u793a\"&gt;divcss\u8d85\u51fa\u957f\u5ea6\u6587\u5b57\u81ea\u52a8\u9690\u85cf\u6216\u7528\u7701\u7565\u53f7\u8868\u793a&lt;\/div&gt;<\/code><\/pre>\n<p>\u6ce8\u610f\uff0c\u8fd9\u91cc\u4ee3\u7801\u7684text-overflow\u7528clip\u800c\u4e0d\u662f\u7528ellipsis\uff0c\u5426\u5219\u5728\u53ef\u89c1\u533a\u57df\u4f1a\u663e\u793a\u7701\u7565\u53f7\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6211\u4eec\u5728\u505a\u7ad9\u7684\u65f6\u5019\uff0c\u4e00\u4e9b\u533a\u57df\u7684\u6807\u9898\u6587\u5b57\u662f\u4e0d\u80fd\u6362\u884c\u7684\uff0c\u4f8b\u5982\u9996\u9875\u5217\u8868\u7684\u6587\u7ae0\u6807\u9898\uff0c\u56e0\u4e3a\u5e03\u5c40\u662f\u56fa\u5b9a\u7684\uff0c\u6362\u884c\u4f1a\u6253\u4e71\u5e03\u5c40\uff0c\u4ece [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[205,722,724,723,725],"class_list":["post-2150","post","type-post","status-publish","format-standard","hentry","category-web","tag-css","tag-div","tag-724","tag-723","tag-725"],"_links":{"self":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/posts\/2150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/comments?post=2150"}],"version-history":[{"count":0,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/posts\/2150\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/media?parent=2150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/categories?post=2150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.baishitou.cn\/wp-json\/wp\/v2\/tags?post=2150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}