在CSS中,我们经常会遇到一种问题:数字无法在指定的宽度内自动换行。这时,我们可以使用CSS的一些语法来解决这个问题。重点代码如下:p { width: 200px; /* 设置p标签宽度 */ wo
p { width: 200px; /* 设置p标签宽度 */ word-wrap: 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样式 */ }
<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>
粉丝
0
关注
0
收藏
0