CSS 文字自适应换行处理方法:word-wrap, white-space, overflow-wrap
在 CSS 中,文字自适应容易处理的方法有以下几种:
- 使用
word-wrap: break-word;属性,可以使长单词或 URL 在单词边界处进行换行,以适应容器的宽度。
.container {
word-wrap: break-word;
}
- 使用
white-space: pre-wrap;属性,可以使文本在遇到换行符时进行换行,并且保留连续的空格。
.container {
white-space: pre-wrap;
}
- 使用
overflow-wrap: break-word;属性,可以使长单词或 URL 在单词边界处进行换行,以适应容器的宽度。这个属性在 CSS3 中引入,它是word-wrap属性的替代方案。
.container {
overflow-wrap: break-word;
}
以上方法可以根据需要选择其中一种来处理换行后文字的自适应。
原文地址: https://www.cveoy.top/t/topic/pkry 著作权归作者所有。请勿转载和采集!