一、CSS文字超出换行
CSS控制文本的溢出,主要有以下几种方式:
1. text-overflow属性
.txt{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* 显示省略号 */
}
以上代码和CSS,当文字超出200px宽度时,超出部分用省略号表示。如果不需要省略号,可以使用text-overflow: clip; 来实现。
2. word-break属性
.txt{
width: 300px;
word-break: break-all; /* 字符会跨行断开,不考虑单词 */
}
以上代码和CSS,当文字超过300px宽度时,让文字在字符处断开,而不是在单词的中间断开。
3. white-space属性
.txt{
white-space: pre-wrap; /* 自动换行,保留连续空格和换行符 */
}
以上代码和CSS,当文本太长时,自动折行。但保留连续空格和换行符,
等同于在HTML代码中用 “< pre >” 标签,保留换行符和空格。
二、CSS图片超出换行
当图片尺寸过大,超出了父级元素的宽度时,图片会响应式缩小,但是图片的长宽比会被改变,导致变形。
因此使用以下方法,将大图片等比例缩小,且不变形。
1. max-width属性
.img{
max-width: 100%;
height: auto;
}
以上代码和CSS,当图片宽度超过父级元素时,将图片自动缩小,不会变形。
三、文字自动换行
如果文本中包含的单词过长,无法进行折行,而只能在较前的位置进行断行,可能会影响排版美观度。这时我们使用以下属性来自动将文本折行。
1. hyphens属性
.txt{
width: 300px;
hyphens: auto;/* 自动断行 */
}
以上代码和CSS,当单个单词长度超过300px时,在单词内部进行断行处理。
但是,该属性不支持所有浏览器,如IE、Edge浏览器就不支持。
2. word-wrap属性
.txt{
width: 300px;
word-wrap: break-word;/* 自动换行 */
}
以上代码和CSS,当单个单词长度超过300px时,直接在单词内部进行断行处理。和hyphens相比,word-wrap支持更多的浏览器,并且能在单词中间进行断行。