1.CSS文本超出隐藏并显示省略号
内容为1行时:
overflow:hidden; // 超出的文本隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 溢出不换行
内容为2行时:
overflow: hidden;
text-overflow : ellipsis;
display : -webkit-box; //作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式: 从上到下垂直排列
-webkit-line-clamp: 2; //显示的行数
2.关于文本的CSS整理:
- text-indent 属性规定文本块中首行文本的缩进。
CSS1属性 length 定义固定的缩进。默认值:0。 % 定义基于父元素宽度的百分比的缩进。 inherit 规定应该从父元素继承 text-indent 属性的值。 注意: 负值是允许的。如果值是负数,将第一行左缩进。
-
text-justify属性指定文本对齐设置为"justify"的理据。此属性指定应怎样对齐文本以及对齐间距。
text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim; CSS3 属性 值 描述 auto 浏览器决定齐行算法。 none 禁用齐行。 inter-word 增加/减少单词间的间隔。 inter-ideograph 用表意文本来排齐内容。 inter-cluster 只对不包含内部单词间隔的内容(比如亚洲语系)进行排齐。 distribute 类似报纸版面,除了在东亚语系中最后一行是不齐行的。 kashida 通过拉伸字符来排齐内容。 改变字与字之间的间距使得每行对齐: div{ text-align:justify; text-justify:inter-word; }
-
text-overflow属性指定当文本溢出包含它的元素,应该发生什么。
text-overflow: clip|ellipsis|string; CSS3属性 值 描述 clip 修剪文本。 ellipsis 显示省略符号来代表被修剪的文本。 string 使用给定的字符串来代表被修剪的文本。
-
text-shadow 属性应用于阴影文本。
CSS3属性 text-shadow: h-shadow v-shadow blur color; 值 描述 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊的距离。 color 可选。阴影的颜色。
-
text-transform 属性控制文本的大小写。
CSS1属性 值 描述 none 默认。定义带有小写字母和大写字母的标准的文本。 capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 lowercase 定义无大写字母,仅有小写字母。 inherit 规定应该从父元素继承 text-transform 属性的值。
-
text-wrap属性指定文本换行规则。
text-wrap: normal|none|unrestricted|suppress; 值 描述 normal 只在允许的换行点进行换行。 none 不换行。元素无法容纳的文本会溢出。 unrestricted 在任意两个字符间换行。 suppress 压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。
-
white-space属性指定元素内的空白怎样处理。
CSS1属性 值 描述 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列,但是正常地进行换行。 pre-line 合并空白符序列,但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。
-
word-break属性指定非CJK脚本的断行规则。
CSS3属性 提示:CJK脚本是中国,日本和韩国("中日韩")脚本。 word-break: normal|break-all|keep-all; 值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。
-
word-spacing属性增加或减少字与字之间的空白。
CSS1属性 值 描述 normal 默认。定义单词间的标准空间。 length 定义单词间的固定空间。 inherit 规定应该从父元素继承 word-spacing 属性的值。 注意: 负值是允许的。 指定段字之间的空间,应该是30像素: p{ word-spacing:30px; }
-
word-wrap属性允许长的内容可以自动换行。
CSS3属性 word-wrap: normal|break-word; 值 描述 normal 只在允许的断字点换行(浏览器保持默认处理)。 break-word 在长单词或 URL 地址内部进行换行。 指定如果足够长得话,应该换行: p.test {word-wrap:break-word;}
-
writing-mode 属性定义了文本在水平或垂直方向上如何排布。
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left vertical-lr:垂直方向内内容从上到下,水平方向从左到右 sideways-rl:内容垂直方向从上到下排列 sideways-lr:内容垂直方向从下到上排列 表格中展示了不同的书写模式: .example.Text1 span, .example.Text1 { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; } .example.Text2 span, .example.Text2 { writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; } .example.Text3 span, .example.Text3 { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; } .example.Text4 span, .example.Text4 { writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; } .example.Text5 span, .example.Text5 { writing-mode: sideways-rl; -webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; }