Zi 字媒體

此篇文章瀏覽量： 1,367 通常在文章的摘要中，我們會希望文字過多時，超過某個範圍，就顯示省略符號(…)，在 CSS 當中，單行是很容易達成的。 但多行文字時，要顯示省略符號，在 CSS 中是做不到的，只有到了 CSS3 出了其它屬性後，才有機會實現，但目前實做的結果，僅限 Safari 和 Chrome 瀏覽器。 單行文字顯示省略符號(…) // html 這是單行文字，超過 150px 時，將顯示省略符號 // CSS div.one_line{ border: 1px solid red; width: 150px; /* 第一步：先禁止斷行 */ white-space: nowrap; /* 第二步：超過部份隱藏 */ overflow: hidden; /* 第三部：表示文字溢出時，顯示省略符號(...) */ text-overflow: ellipsis; } 透過上述 CSS 的三個步驟，就可以完成單行文字顯示省略符號(…)的結果，結果如下圖： 多行文字顯示省略符號(…) 此方式僅能運用在 webkit 瀏覽器，也就是 Safari及 Chrome，其它瀏覽器我們必須透過降級的方式，來勉強可以接受，也就是指定最大高度。 // html 這是多行文字，超過一定寬度時，將顯示省略符號。 // CSS div.multiple_line{ border:1px solid red; width:150px; /* 第一步：設定 display 為 -webkit-box 元素。 */ display: -webkit-box; /* 第二步：設定 box 的子元素，是由上往下垂直排列。 */ -webkit-box-orient: vertical; /* 第三步：設定欲顯示的行數，超出則顯示省略符號(...)。 */ -webkit-line-clamp: 2; /* 第四步：設定超過上述指定之行數時隱藏。 */ overflow: hidden; /* 第五步：其它瀏覽器降級方式：給定最大高度 */ max-height:48px; } 結果如下圖： 若想自己動手改改看，可透過以下 codepen： See the Pen 單行與多行文字的省略符號 by CarlosStudio (@carlos411) on CodePen. 若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。 Facebook Twitter