Skip to main content

如何在CSS中包装文本?

CSS word wrap属性用于打断长单词并换行到下一行。当无法断开的字符串太长而无法放入包含框时,此属性用于防止溢出。

此属性定义单词中的分隔符,以避免单词太长而无法放入容器时溢出。它指定内容超出容器边界时的分词。

语法

word-wrap: normal |  break-word | initial l inherit ;  

价值观

正常:它是默认值,仅用于在允许的断点处断开单词。

打破单词:用来打破牢不可破的单词。

translate failed

初始值:用于将属性设置为其默认值。

继承:它从其父元素继承属性。

实例

<!DOCTYPE html>    
<html>
<head>
<style>
.test {
width: 200px;
background-color: lightblue;
border: 2px solid black;
padding: 10px;
font-size: 20px;

}
.test1 {
width: 11em;
background-color: lightblue;
border: 2px solid black;
padding: 10px;
word-wrap: break-word;
font-size: 20px;
}
</style>
</head>
<body>
<h1> Without Using word-wrap </h1>
<p class="test"> In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg. </p>
<h1> Using word-wrap: break-word; </h1>
<p class="test1"> In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg. The long word will break and wrap to the next line. </p>
</body>
</html>

输出

如何在CSS中包装文本