含 实现...文首截取&多行文本截取
Ⅰ text-overflow: ellipsis;什么时候可能不生效?
- 设置在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 value
text-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例子链接
![e9f2d7150b24dc7a15a4b6c7a030fe9a.png](https://i-blog.csdnimg.cn/blog_migrate/cdd2f99b835095db5e4ebf51640b462f.jpeg)
<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 开头
例子:
![4dd3b0ed65f5a4c259b8126e487f32cf.png](https://i-blog.csdnimg.cn/blog_migrate/80c71f208141f47827be016c9f7bc0e0.png)
<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来实现。
![81bf8eb6833874fe9ddb6d62db0d5b0d.png](https://i-blog.csdnimg.cn/blog_migrate/d66f690cc7729fa03c43971fa88609ed.jpeg)
CodePen reverse ellipsis例子链接
Ⅳ 多行显示并在最后一行截断文字?
上面我们为了能够截断文字,使用了
white-space: nowrap; // 强制文本在一行显示
如果我确实有多行显示的需求呢?怎么实现?
![e07c5216d074380cd42c6cdc24d143ee.png](https://i-blog.csdnimg.cn/blog_migrate/2c5e2c2a975db634b83d01da67a5dffb.jpeg)
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