HTML里显示文本超长时，如何截断只显示部分？【百科全说】

在一个网页里，有的内容非常多，全部显示出来会很长，为了节省显示空间，我们往往只显示内容的一部分，以便能显示更多其他的内容。
以前处理时，我们只是根据显示的宽度，来动态计算大概能显示多少个字符，然后截取一部分的内容显示出来。这样很麻烦，因为不同的宽度，需要截取的字符不一样，而且只截取显示一段的内容，不利于SEO优化。
下面我们来看下怎么利用css来处理这种问题。

操作方法

01

首先看下我们测试例子的代码，很简单的代码，就是一个div，div里就是一段很长的字符串内容。
02

运行后，就是一个普通的div内容块。
03

如果我们的内容显示只需要显示一行，其余的隐藏，那就很简单，我们加上css样式就可以了，只需要三行样式代码，如下： white-space: nowrap; //这行是让字符显示不要换行，只在一行里显示 overflow: hidden; //这行是让字符显示超过div容器宽度时，就隐藏内容 text-overflow:ellipsis; // 这行是当字符超过div窗口宽度时，就加上省略号为了对比效果，我这里再加一段div的内容。如图
04

刷新页面后，效果如图，内容显示在一行里了，超过容器的字符不显示，并用省略号表示。（我们真实的字符串里，是没有省略号的）
05

如果我们需要显示的内容不止一行时，又要怎么处理？比如div最多显示二行内容，超过的隐藏不显示。我们还是通过css来处理。代码如下， overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical;
06

运行效果如图，但这个效果只能在Chrome，Safari浏览器下有效，因为用的是webkit特有的样式，FireFox，IE等浏览器下无效。
07

那么在FireFox，IE浏览器下，要怎么处理呢？我们可以加上一行样式，设置div容器的最大高度，代码如下， max-height: 40px; // 这个高度就是二行字符显示的高度，
08

FireFox浏览器下运行如下，没有省略号的效果，但也能接受了。

HTML里显示文本超长时，如何截断只显示部分？

操作方法

相关推荐