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

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

02 【HTML里显示文本超长时，如何截断只显示部分？】运行后，就是一个普通的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里显示文本超长时，如何截断只显示部分？

猜你喜欢