CSS:自动换行并在需要时断词 [英] CSS: Wrap text AND break word if necessary

问题描述

如何设置div，使其可以换行并在必要时也可以断词?下面的示例用点表示div的宽度("zzzzzzz ..."是一个单词).

How can I set up a div such that it will wrap text AND will also break word if necessary? Examples below, with the dots showing the width of the div ("zzzzzzz..." is all one word).

....................................
您好，这些是
字

....................................
Hello these are
words

..........................................
zzzzzzzzzzzzzzzzzzzz
zzzzzz

....................................
zzzzzzzzzzzzzzzzzz
zzzzzz

推荐答案

您可以使用CSS 自动换行:break-word;

.wrap {
  width: 50px;
  word-wrap: break-word;
  border: 1px solid red
}

<div class="wrap">This is a mormal div wrapping and breaking words</div>

这篇关于CSS:自动换行并在需要时断词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！