`

固定宽度汉字(词)折行

 
阅读更多

固定宽度汉字(词)折行 —— 使用word-break

举个例子,比如说要在一个固定宽度容器里面显示很多地名(假设以空格分隔),为了避免地名中间断开(即一个字在上面而另一个字折断到下一行去了)。则可以使用word-break。比如:
<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海
</div>
值得注意的是里面的空格不能以&nbsp;代替(最少要有一个软空格)。

分享到:
评论

相关推荐

    一行文字超过div宽度的时如何让它不换行

    在网页设计中,我们经常遇到一个问题,那就是当一段文字的长度超过了其所在的容器(例如一个`div`元素)的宽度时,浏览器会自动将其折行显示。然而,在某些设计需求中,我们可能希望文字始终保持在同一行,并且在...

    如何选择PPT字体?.docx

    3. **折行方式**:中文通常按字折行,英文则按词折行,后者能更好地保持文本布局的灵活性。 4. **设计理念**:受“西方教育”的影响,许多设计师认为英文字体设计更“国际化”,这也导致了一些国内PPT设计者对中文...

    《程序天下:JavaScript实例自学手册》光盘源码

    9.5 表格的宽度固定后内容自动换行 9.6 表格的排序 9.7 表格的斜线 9.8 table中的文字滚动 9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 ...

    程序天下:JavaScript实例自学手册

    9.5 表格的宽度固定后内容自动换行 9.6 表格的排序 9.7 表格的斜线 9.8 table中的文字滚动 9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 ...

    CSS语法大全.pdf

    - `white-space`:控制空白字符的处理,`pre`保留空白,`nowrap`不换行,`normal`则自动折行。 7. **显示属性**: - `display`:决定元素如何显示,如`block`表示块级元素,`inline`表示内联元素,`list-item`...

Global site tag (gtag.js) - Google Analytics