文字溢出隐藏后添加省略号
- PHP中文网原创
- 2017-06-21 09:02:391514浏览
当我们想让文字溢出后隐藏并添加省略号的效果
在当前容器或父容器必须要设置宽度，否则代码会失效。
<span style="color: #800000">.box</span>{<span style="color: #ff0000">
width</span>:<span style="color: #0000ff">50%</span>;<span style="color: #ff0000">
text-overflow </span>:<span style="color: #0000ff">ellipsis</span>;<span style="color: #008000">/*</span><span style="color: #008000"> 文字隐藏后添加省略号 </span><span style="color: #008000">*/</span><span style="color: #ff0000">
white-space </span>:<span style="color: #0000ff"> nowrap</span>;<span style="color: #008000">/*</span><span style="color: #008000"> 强制不换行 </span><span style="color: #008000">*/</span><span style="color: #ff0000">
overflow </span>:<span style="color: #0000ff"> hidden</span>;<span style="color: #008000">/*</span><span style="color: #008000">自动隐藏文字</span><span style="color: #008000">*/</span><span style="color: #ff0000">
width</span>:<span style="color: #0000ff"> 20em</span>;<span style="color: #008000">/*</span><span style="color: #008000">不允许出现半汉字截断</span><span style="color: #008000">*/</span>
}
以上是文字溢出隐藏后添加省略号的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn