【CSS】数字英文css没有转换成...换行点、没有换行、拆分的问题（非常常见的需求）

努力挣钱的小鑫

于 2024-08-16 10:09:12 发布

阅读量975

点赞数 15

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

本文链接：https://blog.csdn.net/IAIPython/article/details/141250496

版权

HTML/CSS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

默认情况下，连续的英文或数字文本不会在空格处换行，这可能导致布局问题。

解决方案

要解决这个问题，可以使用以下几种CSS属性：

word-break: 控制单词如何换行。设置为break-all可以让任何字符都能成为换行点。
word-wrap: 控制是否允许单词在行内拆分。设置为break-word可以让单词在必要时拆分到下一行。
white-space: 控制空白字符如何处理。pre-wrap可以保留空白并允许换行，nowrap则强制文本在一行内显示。

文本换行示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本换行示例</title>
<style>
  .container {
    width: 200px; /* 设置容器宽度 */
    border: 1px solid black; /* 边框方便观察 */
  }

  .container p {
    word-break: break-all; /* 允许在任何字符处换行 */
    /* 或者使用 */
    /* word-wrap: break-word; */ /* 允许单词拆分到下一行 */
    /* white-space: pre-wrap; */ /* 保留空白并允许换行 */
  }
</style>
</head>
<body>

<div class="container">
  <p>这是一段非常长的英文文本，希望它能够在容器内自动换行。</p>
  <p>这是一段非常长的数字序列，例如1234567890123456789012345678901234567890，希望它能够在容器内自动换行。</p>
</div>

</body>
</html>

在这里插入图片描述

文本溢出处理

注意英文的多行溢出需要添加word-break: break-all;

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>文本溢出处理</title>
    <style>
      .single-line-container {
        border: 1px solid #000;
        width: 200px;
        white-space: nowrap; /* 禁止换行 */
        overflow: hidden; /* 隐藏溢出的文本 */
        text-overflow: ellipsis; /* 文本溢出时显示省略号 */
      }

      .multi-line-container {
        border: 1px solid #000;
        width: 200px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 指定最大显示行数 */
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all; /* 允许单词内换行 设置为break-all可以让任何字符都能成为换行点。*/
      }
    </style>
  </head>
  <body>
    <!-- 单行文本 -->
    <div class="single-line-container">这是一段非常长的单行文本，超过容器宽度时，将显示省略号...</div>
    <div class="single-line-container">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div class="single-line-container">1111111111111111111111111111111111111111111111111111</div>
    <br />
    <br />
    <!-- 多行文本 -->
    <div class="multi-line-container">这是一段非常长的多行文本，超过指定行数时，将显示省略号...</div>
    <div class="multi-line-container">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div class="multi-line-container">1111111111111111111111111111111111111111111111111111</div>
  </body>
</html>