当一行文字超过 DIV 或者 Table 的宽度的时候, 浏览器中默认是让它换行显示的, 如果不想让他换行要怎么办呢? 下面我们就来看一下使用 CSS 控制文字在一行显示不换行的方法.
CSS 设置字体在同一行的方法:
一般的文字不换行 (适用于内联与块):
- .text-overflow {
- display:block; /* 内联对象需加 */
- width:31em;
- Word-break:keep-all; /* 不换行 */
- white-space:nowrap; /* 不换行 */
- overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
- text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记 (...) ;
- 需与 overflow:hidden; 一起使用.*/
- }
表格中设置文字不换行:
- table{
- width:30em;
- table-layout:fixed; /* 只有定义了表格的布局算法为 fixed,
- 下面 td 的定义才能起作用. */
- }
- td{
- width:100%;
- Word-break:keep-all; /* 不换行 */
- white-space:nowrap; /* 不换行 */
- overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
- text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记 (...) ;
- 需与 overflow:hidden; 一起使用.*/
- }
上述代码实现文字不换行部分介绍:
Word-break:keep-all 设置只能在半角空格或连字符处换行.
white-space:nowrap 样式设置文本不会换行, 文本会在在同一行上继续, 直到遇到 <br> 标签为止.
推荐: CSS 文档 https://www.html.cn/book/css/
来源: http://www.css88.com/qa/css3/18222.html