css不换行

文本中直接用 \n ，无法换行，因为 html 不识别 \n，如果只是单纯的用 replace 把 \n 换成 <br/>，只能变成普通的字符串，也还是无法换行。 解决方法有这么几种： 1. 用 innerHTML = " ... " 或者 v-html 来把 <br/> 识别为 html node 2. 在标签上套一个 <pre></pre> 3. 设置 css 　　 // 合并空白符序列，但是保留换行符。 white-space: pre-line; 同理，针对不能识别多个空格的文本，也可以用以下代码 <div style="white-space:pre">AA BB<div> 来源： https://www.cnblogs.com/_error/p/9989381.html

1. word-break:break-all;只对英文起作用，以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据 3. white-space:pre-wrap; 只对中文起作用，强制换行 4. white-space:nowrap; 强制不换行，都起作用 5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持） 代码： .p1{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据*/ .p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据*/ .p3{white-space:pre-wrap; width:150px;}/*只对中文起作用，强制换行*/ .p4{white-space:nowrap; width:10px;}/*强制不换行，都起作用*/ .p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}／/*不换行，超出部分隐藏且以省略号形式出现*/ 注意

a标签文字强制不换行 强制不换行 a{ white-space:nowrap; } 再补充说明所有关于换行的CSS样式： white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit; white-space 属性设置如何处理元素内的空白 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。 word-wrap: normal|break-word; word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 normal: 只在允许的断字点换行(浏览器保持默认处理) break-word:在长单词或URL地址内部进行换行 word-break: normal|break-all|keep-all; word-break 属性用来标明怎么样进行单词内的断句。 normal：使用浏览器默认的换行规则。 break-all:允许再单词内换行

在网页排版布局中比如文章列表标题排版，无论多少文字均不希望换行显示，需要强制在一行显示完内容。这就 可以nobr标签来实现。它起到的作用与word-break:keep-all 是一样的。nobr 是 No Break 的缩写，意思是禁止换 行。通常在浏览器上显示的文档会在到达浏览器的横幅底端时自动换行，但是如果文字被包含在<nobr>～</nobr>标 签里的话，则不会换行。 由www.169it.com搜集整理 一、nobr语法 1 < nobr >内容</ nobr > 不换行内容放入<nobr>与</nobr>之间即可, 此标签与css white-space功能相同。 二、nobr标签特点： 如不遇到br换行标签，内容在一行显示完，如遇到br换行标签，内容将在加br换行自动换行。 <nobr> 作为定义外观的标签，在 W3C 里未被采用。要用样式表来实现禁止换行的效果的话，请在 white-space 里 指定 nowrap。nowrap使用示例如下: 1 2 3 < div style = "white-space: nowrap;" > 即使浏览器的横幅不够，这里也不会换行。 </ div > 三、html nobr禁止内容换行代码示例 这里假如有4行文章标题列表，设置宽度为200px；css行高为22px；对4列的内容我们采用ul li列表布局，其中2个 对内容加

css样式： 　　单行隐藏： 　　　　　　　　white-space: nowrap; /*超出部分隐藏*/ 　　　　　　　　overflow: hidden; /* 超出部分显示省略号 */ 　　　　　　　　text-overflow: ellipsis /* 超出部分显示省略号 */ 　　多行隐藏：　　　　　　 　　　　　　　　overflow: hidden; 　　　　　　　display: -webkit-box;//将元素设为盒子伸缩模型显示 　　　　　　　-webkit-box-orient: vertical;//伸缩方向设为垂直方向 　　　　　　　-webkit-line-clamp: 3;//超出3行隐藏，并显示省略号 来源： https://www.cnblogs.com/yxkNotes/p/11867448.html

强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个：word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地： word-wrap语法： word-wrap: normal(默认) | break-word 各个浏览器均能识别 参数： normal: 允许内容顶开指定的容器边界。 break-word: 内容将在边界内换行。必要时会触发word-break（注意：请分辨清楚word-break和break-word这俩个是不同的东西，一为属性另为参数）。 说明： word-wrap是控制是否“为词断行”的，设置或检索当前行超过指定容器的边界时是否断开转行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。 范例： congratulation这个单词属于长串英文，word-wrap:break-word整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断，这就是对于长串文字不起作用的解释。word-wrap:normal是默认情况，英文单词不被拆开。 结论： 作用范围仅为div这类标准块级元素，th,td这类table元素虽然识别但是没有效果（如果为td,th加上宽度word

CSS强制不换行超过div部分长度采用省略号, 直接上代码： .bhhslh{ white-space:nowrap; overflow:hidden; text-overflow: ellipsis; } 下面我们看下效果： /*--> */ /*--> */ ST-9 自动喷枪 自动微量喷枪，超低雾化气压，超细雾化颗粒，体积小巧，管路整齐，是水转印，脱模剂使用的喷枪。独有的两路气设计，适合在小件喷涂上发挥优势。进气压力可依您的需求自由调整（2.5-3.0BAR），减少涂料反弹，节省涂料，瘦长的雾化喷幅，雾化均匀，喷幅大，颗粒细，效果特佳，喷涂效率快，速度快！更多自动喷枪，请访问 更多 怎样，看到没有，文字已自动省略, 记住，添加三个CSS就可以了，一个是white-space:nowrap;， overflow:hidden; text-overflow: ellipsis;。 本文参考： http://www.aid12580.com/code/36.html 来源： https://www.cnblogs.com/cannovo/p/11359904.html

1、使文字不换行 white-space: nowrap; 值 描述 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。 2、允许长单词换行 word-wrap:break-word; 值 描述 normal 只在允许的断字点换行（浏览器保持默认处理）。 break-word 在长单词或 URL 地址内部进行换行。 3、换行不截断单词 word-break:break-all; 值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 4、单行文字超出显示省略号 overflow : hidden ; text - overflow : ellipsis ; white - space : nowrap ; 5、多行文字超出显示省略号 overflow: hidden; text-overflow: ellipsis; display: -webkit-box;