首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-11-23 
div 实现单行文本显示之文本溢出空格处理大家在web开发的过程中一定有过处理长文本溢出的情况。那么我下

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

热点排行