html怎样让超出的内容显示为省略号?

Question

html怎样让超出的内容显示为省略号

Answer 1

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到，我想很多人都碰到过吧，这个有两种解决方法一是用程序开截取字符长度，这个其实也是可以的第二种是用样式来做,这里主要介绍一下用样式怎么来做吧，我话也不多说了吧直接上代码吧，css样式如下：[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;}[/css]html代码如下：[html]<div class="css1">Web前端开发 – 专注于网站前端设计与Web用户体验</div><div class="css2">Web前端开发 – 专注于网站前端设计与Web用户体验</div>[/html]<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>