CSS word-break 属性实现文字自动换行 - WebCat - 常规

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>WebCat</title>
 <style>
 .container {
  display: flex;
}
<p>.item {
flex-grow: 1;
border: 1px solid black;
padding: 10px;
word-break: break-all;
}
</style></p>
  </head>
  <body>	
	<div class="container">
  <div class="item">Short 回个话不开车vuvu个老夫IGIGi姑姑个 content</div>
</div> 
  </body>
</html>要让item里面的文字在15个字符的时候换行，可以使用CSS的`word-break`属性来控制文字的换行方式。将`word-break`属性设置为`break-all`表示在任意字符处换行。
<p>修改CSS代码如下：</p>
<pre><code class="language-css">.item {
  flex-grow: 1;
  border: 1px solid black;
  padding: 10px;
  word-break: break-all;
}
</code></pre>
<p>这样，在item的文字达到15个字符时，就会自动换行。</p>