css3实现超过两行文字,超出用三个点显示(兼容性不行,仅供…

CSS3实现超过两行文字，超出用三个点显示

在阅读长段落的文字时，我们通常只会关注前几行的内容。当文本过长时，为了避免页面过于拥挤，我们需要将多余的文字用省略号代替，并且希望这个效果能在不同的浏览器中都得到支持。下面介绍一种实现方法：使用CSS3的 text-overflow 属性和 ellipsis 值。

实现方法

首先，我们需要设置一个固定宽度和高度的区域，用来存放文本内容。然后将文本内容放入其中，并给它设置 overflow: hidden; 属性，确保超出该区域的部分被隐藏起来。

接下来，我们需要使用 text-overflow 属性来指定文本溢出时的显示效果。 text-overflow 属性必须与 white-space 和 overflow 属性同时使用。

最后，我们需要设置 text-overflow 属性的值为 ellipsis，这样超过规定宽度的文本部分就会被省略，加上省略号。

下面是实现方法的样例代码：

div {
  width: 200px;
  height: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

兼容性及注意事项

需要注意的是，该方法兼容性不是很好，只能在一些比较新的浏览器中使用。IE浏览器需要使用 -ms-text-overflow 属性，而对于 Firefox 则需要使用 -moz-text-overflow 属性。

当文本长度不够时，不会出现省略号效果，原因是在 CSS 中设置的内部宽度不会超过容器宽度，因此不会出现溢出的情况。

不过，这种方法比较灵活、简单易用，如果需要在新一代浏览器中展示美观的文本效果，可以考虑使用该方法。

总结一下，实现超过两行文字超出用三个点显示的方法主要涉及到以下知识点：

• 固定区域大小，使用 overflow: hidden 属性隐藏超过区域大小的文本内容；
• 使用 text-overflow 属性指定文本溢出时的显示效果；
• 设置 text-overflow 属性的值为 ellipsis，以省略号的形式代替超出区域部分的文本内容。

希望这篇文章能让你掌握这种CSS3实现文本效果的方法，并且对CSS有更深刻的理解。