Css文字换行、溢出、对齐
文字换行 强制换行:纯数字或者纯字母时,该字符被认为是一个字符,因此不会自动换行,如果父容器的宽度不够,便会超出父容器的限制。 解决方案: 设置自动换行 a、 word-break 规定非中日韩文字的换行规则
·
文字换行
强制换行:纯数字或者纯字母时,该字符被认为是一个字符,因此不会自动换行,如果父容器的宽度不够,便会超出父容器的限制。
解决方案: 设置自动换行
a、 word-break 规定非中日韩文字的换行规则
word-break: normal 只在允许的断字点换行(浏览器保持默认处理)。
word-break: break-all / break-word 允许在长字符内换行
word-break: keep-all 只能在半角空格或连字符处换行
兼容性 : 各大主流浏览器都兼容
a、
word-wrap
属性规定自动换行的处理方法
word-wrap: normal 只在允许的断字点换行(浏览器保持默认处理)。
word-wrap
: break-word
允许在长字符内换行
兼容性 : 各大主流浏览器都兼容
强制不换行: 文本不是很长的字符串时,在到边界值时中日韩文字会自动换行,只需要一行显示时可以让其强制不换行。
解决方案:设置
white-space:nowrap
white-space属性是处理
文本溢出
文本溢出处理属性为 text-overflow
text-overflow:clip 只是在边界值截断文本隐藏
text-overflow:ellipsis 超出边界的文本用“...”代替
单行显示溢出部分用“...”代替,如果文本的容器是行级元素,如span 、i 等需要将其设置为块级元素,再设置容器宽度、强制文本不换行、容器隐藏属性
span{ display: block; width: 100%; white-space: nowrap; /* 强制不换行 */ overflow: hidden; text-overflow: ellipsis; }
如果需要两个span同时溢出时“...”,并且显示在同一行不妨设置 display:inline-block; width:49%;
文本对齐
水平对齐:水平对齐主要说一下 justify
text-align:justify; 如果文本内容一行显示不下,该对齐方式可以是文本内容与父容器两端边界对齐;
使用:在中韩日文字文本可以处理段落层次不齐的问题
弊端:非中日韩文字,文字过长会到各种无法预料的呈现方式。
原因:在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。
更多推荐
已为社区贡献1条内容
所有评论(0)