css 文字溢出省略号

前言

css 文字溢出后显示省略号，这是一个非常常规的操作，但是你会发现在网上很多给出的例子两行之后显示省略号，却没有用。

这是为什么呢？please look follow。

正文

在一行省略的：

.text-oneline{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 100px;
}

简单介绍下:

white-space 这个是处理空白符的，但是这东西还不是这么简单的。

<div>
<p>
这是一些文本。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
</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;，如果没有那么效果是可能实现不了的。一般来说我们是不用这个的，因为这个是因为单词分不分开的问题。

我们开发一般是中文，是一段句子，那么需要加入这个，我们需要断词，如果是英文，如果是因为那么最好去掉。