CSS 文本换行的设置方法
2019-01-15 本文已影响0人
安琪拉D夏亚
当在对 HTML 网页进行布局，或者在评论、上架商品内容的时候，常常会有较长的文本出现，因此对文本的换行和不换行，就需要进行设定。通过 HTML 和 CSS 设置，是一种非常方便和简易的方法。
例如，上架商品时候涉及到的文本换行
设置连续的英文字母及数字换行
在一个盒子模型中，如果一句话遇到了 div 的边框，会自动进行换行，但是，对于连续的数字和英语则无效，这时候就需要调整 div 的 CSS 样式进行强制断行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
div{
width: 70px;
height: 100px;
background: green;
}
.con1,.con2{
border: 1px solid black;
}
</style>
</head>
<body>
<div class="con1">
This is a loooooooooooooooooooooooooooooooooooooooooong word.
</div>
<div class="con2">
This is a short word.
</div>
</body>
</script>
连续字母过长不会换行的情况
如果要对上面的长单词或者较长的连续字母，进行强制换行，则需要添加一下属性
<style>
.con1{
/* 对连续过长的字母和数字进行强制换行*/
word-wrap: break-word; /* 作用机制：首先新起一行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句，相当于仅对连续单词和数字断行，不包括空白*/
}
</style>
word-wrap:break-word
<style>
.con1{
/* 对整个文本设置换行*/
word-break: break-all; /* 作用机制：将整个文本包括空白在内视作一串，如果遇到边界，则强制换行*/
}
</style>
word-break: break-all
CSS3 word-break 属性
指定 非CJK脚本 的断行规则，CJK脚本 是中国，日本和韩国（"中日韩"）脚本。
| 值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则。 |
| break-all | 允许在单词内换行。 |
| keep-all | 只能在半角空格或连字符处换行。(safari、火狐不支持) |
<!DOCTYPE html>
<html>
<head>
<style>
p.test1
{
width:9em;
border:1px solid #000000;
word-break:keep-all;
}
p.test2
{
width:9em;
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1"> This paragraph contains some text. This line will-break-at-hyphenates.</p>
<p class="test2"> This paragraph contains some text: The lines will break at any character.</p>
</body>
</html>
keep-all只在空格或连字符断行
CSS3 word-wrap 属性
允许长的内容可以自动换行
| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器保持默认处理）。 |
| break-word | 在长单词或 URL 地址内部进行换行。 |
