CSS 文本换行的设置方法

时间:2024-03-12 17:03:37

CSS 文本换行的设置方法

当在对 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 地址内部进行换行。

reference

CSS不换行与CSS换行

你真的了解word-wrap和word-break的区别吗?

CSS3 word-wrap 属性

CSS3 word-break 属性

overflow-wrap | MDN