当前位置: 代码迷 >> Web前端 >> div 兑现单行文本显示之文本溢出"空格"处理
  详细解决方案

div 兑现单行文本显示之文本溢出"空格"处理

热度:2012   发布时间:2012-11-23 22:54:33.0
div 实现单行文本显示之文本溢出"空格"处理

大家在web开发的过程中一定有过处理长文本溢出的情况。那么我下面说一下我在开发中遇到的特殊情况的处理过程.

???????????场景1:

?????????????????? <div>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>

?????????????????? 以上文本我只需要现象20px的长度,溢出部分用"..."出来。这个效果我们可以用css来处理

?????????????????? .tb{

???????????????????????????? width:100px;

???????????????????????????? overflow:hidden;

?????????????????????????????text-overflow:ellipsis;

????????????????????}

??????????????????? 通过这样我们就可以达到我们的需求了。不错这是场景一。那么我们在看看下一个场景。

??????????? 场景2:

?????????????????? 还是上面的文字稍微做一下修改

???????????????????<div>BBBB BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>

?????????????????? 在这段文字中加入一个空格,在试试看看是否还管用。结果当然是不管用。

?????????????????? 那么是什么导致的呢。

?????????????????? 在浏览器进行解析div内的文本时将一个空格当成了换行来表现。只需要通过转义符“&nbsp;”将空格进行

???????????????????转义即可。

??????????????????

  相关解决方案