[分享]css中怎样让数字换行

在CSS中，我们经常会遇到一种问题：数字无法在指定的宽度内自动换行。这时，我们可以使用CSS的一些语法来解决这个问题。重点代码如下：p { width: 200px; / 设置p标签宽度 / word...

在CSS中，我们经常会遇到一种问题：数字无法在指定的宽度内自动换行。这时，我们可以使用CSS的一些语法来解决这个问题。
重点代码如下：

p {
  width: 200px; /* 设置p标签宽度 */
  word-wrap: break-word; /* 允许单词内换行 */
} 

这段代码的作用是，将p标签宽度设置为200px，同时启用"break-word"的属性，即在单词内允许换行。
一些情况下，我们可能还需要将数字用括号包裹着。这时，我们可以这样写：

p {
  width: 200px; /* 设置p标签宽度 */
  word-wrap: break-word; /* 允许单词内换行 */
}

pre {
  white-space: pre-wrap; /* 允许内容内的空格和换行符展示 */
}

.pre-with-bracket {
  display: inline-flex; /* 确保括号能单独占据一行 */
}

.pre-brackets {
  white-space: pre-wrap; /* 同pre样式 */
} 

这段代码的作用是，在pre标签内展示括号，同时确保括号能单独占据一行。具体的HTML代码可以如下：

<br>
<p>CSS中需要让数字自动换行的情况。</p><br>
<pre><code class="pre-with-bracket"><br>
（01）儿童餐位（不占餐位数）  <span class="pre-brackets">14984</span><br>
（02）一人餐位                       <span class="pre-brackets">23643</span><br>
（03）二人餐位（不占餐位数）  <span class="pre-brackets">19387</span><br>
（04）三人餐位（占餐位数）       <span class="pre-brackets">12457[^1]</span><br>
（05）四人餐位（占餐位数）       <span class="pre-brackets">9924[^1]</span><br>
（06）五人餐位及以上（占餐位数）<span class="pre-brackets">577[^1]</span><br> 

这个例子展示了如何让数字自动换行，并且在数字前加上一对括号，令整个数字看起来更美观。