CSS 怎么设置文字强制不换行? 本篇文章就给大家介绍 CSS 设置文字 (特别是连续的数字和英文) 强制不换行的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对你们有所帮助.
下面我们通过简单的代码示例给大家介绍 CSS 设置文字的强制不换行, 且超出部分隐藏的方法
html 代码:
- <div class="demo">
- <p>This is a long Wordddddddddddddddddddddddddddddddddddddddd!</p>
- <p class="wrap">This is a long Wordddddddddddddddddddddddddddddddddddddddd!</p>
- </div>
CSS 代码:
- .demo .wrap {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
效果图:
说明:
● white-space:nowrap; 设置文字禁止换行(强制不换行).
white-space 属性设置如何处理元素内的空白, 而 nowrap 值设置文本不会换行, 文本会在在同一行上继续, 直到遇到 <br> 标签为止.
● overflow:hidden; 设置把多余内容隐藏起来, 不让多出来的内容撑破容器.
● text-overflow:ellipsis; 设置多出的内容以省略号... 来表达.
注: text-overflow:ellipsis; 属性主要是用于 IE 等浏览器中, Opera 浏览器要考虑兼容性, 使用 - o-text-overflow:ellipsis; 才可以实现效果; 而在 Firefox 浏览器中就没有这个功能了, 只能把多出的内容隐藏起来.
来源: http://www.css88.com/qa/css3/11359.html