当使用word-break:break-word
时,如何自动调整p
标记的宽度,使其等于文本所需的宽度?
示例:http://jsfiddle.net/ehs5v820/
这里,p
标记应该等于大约160px,而不是200px。
下面是示例中的相关HTML和CSS:
null
.wrapper {
background-color: powderblue;
width: 200px;
}
.wrapper p {
width: auto;
word-break: break-word;
background-color: mistyrose;
}
<div class='wrapper'>
<p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p>
</div>
null
您可以使用display:inline
。
null
.wrapper {
background-color: powderblue;
width: 200px;
}
.wrapper p {
display: inline;
word-break: break-word;
background-color: mistyrose;
}
<div class='wrapper'>
<p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p>
</div>