前言
css 文字溢出后显示省略号,这是一个非常常规的操作,但是你会发现在网上很多给出的例子两行之后显示省略号,却没有用。
这是为什么呢?please look follow。
正文
在一行省略的:
.text-oneline{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
}
简单介绍下:
white-space 这个是处理空白符的,但是这东西还不是这么简单的。
<div>
<p>
这是一些文本。 这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
</p>
</div>
{
white-space:pre;
}
div{
width:300px;
}
你看我这里有非常多的空白符,然后呢看下white-space:pre;的表现
因为其实 所以无论是white-space:pre-line;还是white-space:pre-wrap;都一致。
所以空白符,不是指的是white-space:pre;,而是" "空白。
<p>
这是一些文本。 这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
</p>
white-space:pre;效果不变不演示。
white-space:pre-wrap;会换行:
white-space:pre-line;会把一行中的空符合成一个:
white-space:unwrap;在一行中显示,不换行,但是遇到换行符还是会换的。
好的,那么就看下两行的。
.text-twoline{
display: -webkit-box;
overflow: hidden;
word-break: break-word;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
width: 100px;
}
上面的一切都是为了实现webkit-line-clamp:2,但是为了让它生效,必须具有display: -webkit-box;和-webkit-box-orient: vertical;
里面有个关键部分:word-break: break-word;,如果没有那么效果是可能实现不了的。一般来说我们是不用这个的,因为这个是因为单词分不分开的问题。
我们开发一般是中文,是一段句子,那么需要加入这个,我们需要断词,如果是英文,如果是因为那么最好去掉。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。