CSS文本换行_css换行

CSS文本换行处理

一、文本基本属性

1. white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit; 规定段落中的文本如何换行
   1. normal：默认。空白会被浏览器忽略。
   2. pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre>标签。
   3. nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br>标签为止。
   4. Pre-wrap:：保留空白符序列，但是正常地进行换行。
   5. Pre-line：合并空白符序列，但是保留换行符。
   6. inherit：继承父盒属性；
2. word-wrap：normal | break-word;属性允许长单词或 URL 地址换行到下一行。
   1. normal：只在允许的断字点换行（浏览器保持默认处理）。
   2. break-word：在长单词或 URL 地址内部进行换行。
3. word-break：normal | break-all | keep-all; 属性规定自动换行的处理方法，可以让浏览器实现在任意位置的换行。
   1. normal：使用浏览器默认的换行规则。
   2. break-all：允许在单词内换行。
   3. keep-all：只能在半角空格或连字符处换行。
4. word-spacing：normal | length; 属性增加或减少单词间的空白（即字间隔）。length:长度单位；可以为0或负值
5. text-overflow：clip | ellipsis； 属性规定当文本溢出包含元素时发生的事情。
   1. clip：超出宽度 修剪文本。
   2. ellipsis：显示省略符号来代表被修剪的文本。
6. writing-mode ：horizontal-tb | vertical-rl | vertical-lr；属性规定文本行水平还是垂直地排布。
   1. horizontal-tb：让内容从左到右水平流动，从上到下垂直流动。
   2. vertical-rl：让内容从上到下垂直流动，从右到左水平流动。
   3. vertical-lr：让内容从上到下垂直流动，从左到右水平流动。

二、数字、英文和特殊符号无法换行问题

​ 当给div盒子设置固定宽度时，当字符是汉字时会在盒子宽度出自动这行。但是如果字符是英文、数字、特殊符号时效果却不是我们想要的结果。这是因为浏览器在解析页面的时候，把这一串字符当成一个单词了，这样就不会自动切断字符串而进行换行。 相信当我们了解上面的属性之后就知道如何处理这个问题；

.text {
	width: 200px;
    height: 200px;
    background-color: aqua;
    /* 允许在单词内换行。如果到一行末尾长单词没有结束会截断单词 拼接在下一行 */
    word-break: break-all;
    /* 在长单词或 URL 地址内部进行换行。 在一行末尾处遇到长单词会自动换行去下一行展示 */
    word-wrap: break-word;
}
1
2
3
4
5
6
7
8
9

三、解决文本溢出隐藏问题；

​ 平常遇到这样的业务逻辑，当文字描述一行放不下时也不希望折行显示，只想展示省略号代表内容未完。想要实现这个效果，有几种实现方案；

1. 利用上面了解的属性几行代码轻松搞定：

   .text {
   	width: 200px;
       height: 200px;
       background-color: aqua;
       /* 强制文本不换行 */
     	white-space: nowrap;
     	/* 溢出隐藏 */
     	overflow: hidden;
     	/* 溢出部分省略号 */ 
     	text-overflow: ellipsis;
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11

2. text-overflow是css3新增属性，有些低版本的浏览器不支持就需要使用伪元素模拟省略号；

   .text {
   	position: relative;
   	width: 200px;
       height: 200px;
       background-color: aqua;
       /* 强制文本不换行 */
     	white-space: nowrap;
     	/* 溢出隐藏 */
     	overflow: hidden;
     	padding-right: 30px;
   }
   .text::after {
   		content: '...';
   		display: block;
   		position: absolute;
   		top: 2px;
   		right: 0px;
   		width: 30px;
   		height: 30px;
   		background: aqua;
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21