长按识别二维码关注
网站首页 >> 应用案例 >> 品牌策划 >> css强制换行（css中强制换行）
本篇文章给大家谈谈css强制换行，以及css中强制换行对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
css强制换行（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;一起使用*/
}
注：这个只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。这个写法只有IE会有"..."，其它的浏览器文本超出指定宽度时会隐藏。
css强制换行（css中强制换行）
前端里的文字为什么会自动换行
回答 ：浏览器的缺省换行是不会断开单词或数字的，”12345678901234567890″字符串中间没有任何分隔符，所以它认为是一个不可断开的单词，因此以不换行处理。字符串”我想回家我想回家”有汉字，词法解析时认为双字节字符都可以分开，所以就正确换行如果在字符串中间加一个空格也行，但是逗号不行。
解决方法：强制换行
可以设置对象的css属性：word-wrap：break-word，或者设置 word-break：break-all；
css表格文字默认是自动换行的。根据查询相关公开信息显示，css表格文字默认是自动换行的，完成一段话后点击一下就会自动换行。
