文字超出隐藏并显示省略号
文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法
一是用程序开截取字符长度,这个其实也是可以的
第二种是用样式来做,这里主要介绍一下用样式怎么来做吧,我话也不多说了吧直接上代码吧,
css样式如下:
.css 1 { color : #6699ff ; border : 1px #ff8000 dashed ; margin-bottom : 20px ; width : 20em ; /*不允许出现半汉字截断*/ } .css 2 { overflow : hidden ; /*自动隐藏文字*/ text- overflow : ellipsis; /*文字隐藏后添加省略号*/ white-space : nowrap ; /*强制不换行*/ width : 20em ; /*不允许出现半汉字截断*/ color : #6699ff ; border : 1px #ff8000 dashed ; } |
html代码如下:
< div class = "css1" >Web前端开发 - 专注于网站前端设计与Web用户体验</ div > < div class = "css2" >Web前端开发 - 专注于网站前端设计与Web用户体验</ div > |
<st这yle type=”text/css”>
.css1{
color:#6699ff;border:1px #ff8000 dashed;
margin-bottom:20px;
width: 20em;/*不允许出现半汉字截断*/
}
.css2 {
overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
width: 20em;/*不允许出现半汉字截断*/
color:#6699ff;border:1px #ff8000 dashed;
}
</style>
<div class=”css1″>Web前端开发 – 专注于网站前端设计与Web用户体验</div>
<div class=”css2″>Web前端开发 – 专注于网站前端设计与Web用户体验</div>
<p>