含 實現...文首截取&多行文本截取

Ⅰ text-overflow: ellipsis;什么時候可能不生效？

1. 設置在width有效的元素上，并且設置必要的width。

• 塊級元素（block level element） width、height 屬性默認有效.[example 1]
• 內聯元素（inline element 有的人也叫它行內元素）width、height 屬性無效。[example 2] 可以通過改變display，使得width、height屬性有效。

display: block; //inline-block;

2. 要想這兩個屬性起真正的作用，需要配合：

overflow: hidden; // 超出文本的部分不顯示

white-space: nowrap; // 強制文本在一行顯示

3. 在table內td除了滿足前兩個條件之外。要在table的樣式里定義一個屬性

table-layout: fixed [example 3]

<!-- example 1 -->
<div class="divTitle">div text-overflow: ellipsis;什么時候可能不生效？</div>
<!-- example 2 -->
<span class="spanTitle">span text-overflow: ellipsis;什么時候可能不生效？</span>
<!-- example 3 -->
<table><tr><td  class="box  ellipsis"><span>Here is some long content that doesn't fit.Here is some long content that doesn't fit</span>A</td></tr>
</table>
```css
// example 1
.divTitle {width: 10px; // or other valuetext-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}// example 2
.spanTitle {display: inline-block;width: 10px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}// example 3
table { table-layout:fixed; 
}
td { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 10px; 
} 
```

---

Ⅱ text-overflow的不同樣式

clip 這個關鍵字的意思是"在內容區域的極限處截斷文本"，因此在字符的中間可能會發生截斷。為了能在兩個字符過渡處截斷，你必須使用一個空字符串值 ('')(To truncate at the transition between two characters, the empty string value ('') must be used.)。此為默認值。
ellipsis 這個關鍵字的意思是“用一個省略號 ('…', U+2026 HORIZONTAL ELLIPSIS)來表示被截斷的文本”。這個省略號被添加在內容區域中，因此會減少顯示的文本。如果空間太小到連省略號都容納不下，那么這個省略號也會被截斷。
string 自定義字符串 string用來表示被截斷的文本。字符串內容將被添加在內容區域中，所以會減少顯示出的文本。如果空間太小到連省略號都容納不下，那么這個字符串也會被截斷。但是這個屬性在很多瀏覽器中都不支持，要謹慎使用。

最有意思的是，如果結合使用

direction: rtl

可以指定截斷文本是在文末還是在開頭。

CodePen text-overflow例子鏈接

<p class="overflow-visible">overflow-visible Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-clip">overflow-clip Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-ellipsis">overflow-ellipsis Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-ellipsis first">overflow-ellipsis first Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-string">overflow-string Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
```css
p {
width: 200px;
border: 1px solid;
padding: 2px 5px;/* BOTH of the following are required for text-overflow */
white-space: nowrap;
overflow: hidden;
}.overflow-visible {
white-space: initial;
}.overflow-clip {
text-overflow: clip;
}.overflow-ellipsis {
text-overflow: ellipsis;
}.overflow-ellipsis.first {
direction: rtl;
text-overflow: ellipsis;
}.overflow-string {
/* Not supported in most browsers, see the 'Browser compatibility' section below */
text-overflow: " [..]"; 
}
```

---

Ⅲ ...文首截斷？

我們一般都會在文末截斷... 如果我確實有文首截斷的需求呢？怎么實現？

方法一

結合使用direction可以指定截斷文本是在文末還是在開頭。

direction: rtl; // at right end 文末
direction: ltr // at left end 開頭

例子：

<p class="overflow-ellipsis">overflow-ellipsis Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-ellipsis first">overflow-ellipsis first Lorem ipsum dolor sit
p {width: 200px;border: 1px solid;padding: 2px 5px;/* BOTH of the following are required for text-overflow */white-space: nowrap;overflow: hidden;
}
.overflow-ellipsis {text-overflow: ellipsis;
}.overflow-ellipsis.first {direction: rtl;text-overflow: ellipsis;
}

方法二

如果方法一在有些瀏覽器中不支持的話，可以使用：before添加content來實現。

CodePen reverse ellipsis例子鏈接

---

Ⅳ 多行顯示并在最后一行截斷文字？

上面我們為了能夠截斷文字，使用了

white-space: nowrap; // 強制文本在一行顯示

如果我確實有多行顯示的需求呢？怎么實現？

CodePen multiline例子鏈接

<p class="block-with-text">The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of  Jaglan Beta.</p>
<p class="block-with-text">Small text, less then one row. Without dottes.</p>
<p class="block-with-text" style="width: 250px;">2.5 lines example: A towel is about the most massively useful thing an interstellar hitch hiker can have</p>
body {margin: 0;padding: 50px;font: 400 14px/1.2em sans-serif; background: white;
}p {width: 500px;
}/* mixin for multiline */
@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white){overflow: hidden;position: relative;line-height: $lineHeight;max-height: $lineHeight * $lineCount; text-align: justify;margin-right: -1em;padding-right: 1em;&:before {content: '...';position: absolute;right: 0;bottom: 0;}&:after {content: '';position: absolute;right: 0;width: 1em;height: 1em;margin-top: 0.2em;background: $bgColor;}
}.block-with-text {@include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 2, $bgColor: white);  
}

---

The reference link

Pure CSS for multiline truncation with ellipsis

MDN text-overflow

總結

以上是生活随笔為你收集整理的overflow超出显示_[CSS]text-overflow: ellipsis;什么时候可能不生效？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。