css换行：实现固定文本整体换行

最新推荐文章于 2025-04-11 17:31:49 发布

不是本人11

最新推荐文章于 2025-04-11 17:31:49 发布

阅读量2.6k

点赞数 1

分类专栏： css/css3 文章标签：前端 css3

本文链接：https://blog.youkuaiyun.com/bozhouyongqi/article/details/115791329

版权

css/css3 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用CSS解决文本换行问题，特别是如何保持特定词汇在换行时作为一个整体。通过设置`whitespace`和`word-break`属性，并结合`display: inline-block`，可以确保如“真美好”这样的词组在换行时不被拆分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文本换行是css样式处理中常见的问题，通过使用whitespace和word-break属性配合即可。但有时在换行时，不希望随意换行，希望部分文本作为整体一起换行。例如文本“今天天气真美好”，希望在换行时，真美好三个字一起换到第二行，此时将真美好的display设置为inline-block即可实现。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本换行处理</title>
  <style>
    .container {
      width: 100px;
      border: 1px solid red;
    }
    .wrap-together {
      display: inline-block;
    }
  </style>
</head>
<body>
  单独换行
  <p class="container">
    <span>今天天气真美好，哈哈</span>
  </p>
  作为整体换行
  <p class="container">
    <span>今天天气<span class="wrap-together">真美好</span>，哈哈</span>
  </p>
</body>
</html>

效果：
在这里插入图片描述