当前位置: 源码素材网 » CSS教程 » 详情页

CSS text-overflow 文本溢出省略号的实现

  •   时间:2019-01-10
  • 概述:text-overflow 文本溢出 省略号

有时候为了整体布局的考虑,在一个LI列表中,需要设置当文本超出规定长度后,自动显示省略号,这就要用到CSS中的text-overflow属性,这个属性很好用,而且效果很好,兼容性也不错,下面以一个例子的代码,来演示用法:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css属性实例</title>
<style>
div{
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  font-size:36px;
  width:400px;
}
p{
  text-overflow:ellipsis;
  overflow:visible;
  white-space:nowrap;
  font-size:36px;
  width:400px;
}
</style>
</head>
<body>
  <div>这是一个关于文本溢出属性的实例,注意文本中段首部分的显示效果。</div>
  <p>这是一个关于文本溢出属性的实例。</p>
</body>
</html>

 text-overflow 属性一般要和被控元素的Width配合使用,因此提醒大家,若text-overflow 失效,你要检查一下是否忘记定义了宽度。

    相关声明:

      若“CSS text-overflow 文本溢出省略号的实现”有损您的权益,请告之我们删除内容。
      部分文章来源于网络,版权归原作者所有。