fe-hunter 实现文本过长溢出处理

要实现的功能

CSS中文本过长溢出时，省略号该如何处理？要考虑极端情况，如：都是数字或者都是字母时

代码示例

最佳答案评选标准

请写出实现思路、代码，并为代码的关键步骤增写注释
附带效果截图是加分项

最佳答案

悬赏中，欢迎作答...

答题同学须知

答题规范：请在一次评论中完成作答，后续修改也请编辑该评论，而不是追加新的评论
评选标准：最佳答案由围观同学的 👍 和卡颂共同决定
评选时间：一般是问题发布24小时后评选，如果问题发布当天回答数较少，问题悬赏金额可能增加，同时悬赏时间也会增加

围观同学须知

对于你满意的答案，请不要吝惜你的 👍，这是评选最佳答案的依据
非答题的评论会被删除，问题相关讨论请在赏金猎人群中进行

Apr 12 '22 02:04 BetaSu

CSS实现：

<style>
  .box {
    width: 300px;
    height: auto;
    margin: 20px auto;
    border: 1px solid;
  }

  // 单行文本溢出
  .single-text-overflow {
    overflow: hidden;
    /* 文字一行显示，不换行 */
    white-space: nowrap;
    /* 当文本溢出时，以省略号表示超出的文本 */
    text-overflow: ellipsis;
  }

  // 多行文本溢出
  .multiline-text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    /* 设置为弹性伸缩盒子模型 */
    display: -webkit-box;
    /* 限制在一个块元素显示的文本的行数, 最多显示3行 */
    -webkit-line-clamp: 3;
    /* 设置伸缩盒子的子元素的排列方式*/
    -webkit-box-orient: vertical;
    /* 英文字符文本间的单词断行 */
    word-break: break-all;
  }
</style>

<div class="box single-text-overflow">
  sdsfsfsfsfsfsfsfsfswwwwwww22324234234sfdsdfdsfsfsdfdsfsfsdfsdfddfsfs111222222222222222222222222222
</div>
<div class="box multiline-text-overflow">
  sdsfsfsfsfsfsfsfsfswwwwwww22324234234sfdsdfdsfsfsdfdsfsfsdfsdfddfsfs111qqqqqqqqqqqq22222222wwwww2222222222222222222
</div>
<div class="box single-text-overflow">
  一段单行文本一段单行文本一段单行文本一段单行文本一段单行文本一段单行文本一段单行文本一段单行文本一段单行文本
</div>
<div class="box multiline-text-overflow">
  一段多行文本我是一段多行文本我是一段多行文本我是一段多行文本我是一段多行文本我是一段多行文本我是一段多行文本我是一段多行文本我是一段多行文本
</div>

效果：

JS实现：

<style>
    #box {
      border: 1px solid;
      width: 300px;
      height: 80px;
      /* 考虑如果是字母或数字，宽度不够则强制换行 */
      word-wrap: break-word;
      overflow: auto;
    }
  </style>
  <body>
    <div id="box"></div>
  </body>
  <script>
    const text =
      "这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本文本这是一个文本这是一个文本文本这是一个文本这是一个文本这是一个文一个文本这是一个文本这是一个文一个文本这是一个文本这是一个文本文本这是一个文本这是一个文本";
    let el = document.getElementById("box");
    for (let i = 0; i < text.length; i++) {
      /* 让文本内容长度递增 */
      el.innerHTML = text.slice(0, i);
      /* 如果当前文本所在元素的高度，小于滚动条内容的高度 */
      if (el.offsetHeight < el.scrollHeight) {
        /* 溢出内容做隐藏处理 */
        el.style.overflow = "hidden"
        /* 截取末尾三个字符，用...替代 */
        el.innerHTML = text.slice(0, i - 3) + "...";
        break;
      }
    }
  </script>

Apr 12 '22 03:04 xianguoGou

截屏2022-10-25 21 15 41 截屏2022-10-25 21 15 57

Oct 25 '22 13:10 Daniel-Fang

当文本内容过长时，我们可以使用 CSS 的 text-overflow 属性和 overflow 属性来实现省略号的效果。

具体实现步骤如下：

设置元素的宽度。这是必要的，因为如果元素没有固定的宽度，那么浏览器就无法确定什么时候开始出现省略号。
将 white-space 属性设置为 nowrap，以确保文本不会换行。
将 text-overflow 属性设置为 ellipsis，以显示省略号。
将 overflow 属性设置为 hidden，以隐藏文本溢出部分。需要注意的是，当文本是一连串数字或字母时，由于没有空格分隔符，浏览器可能无法确定在何处截断字符串，从而无法正确显示省略号。这时，可以通过设置 word-break: break-all; 来强制将单词按照字母逐个截断，从而实现正确的省略号效果。

<div class="ellipsis">这是一段很长很长的文本</div>
//css 
css
.ellipsis {
  width: 200px; /* 元素宽度 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 显示省略号 */
  overflow: hidden; /* 隐藏溢出部分 */
  word-break: break-all; /* 强制按字母逐个截断单词 */
}

如果文本内容全部是数字或字母，也可以使用 letter-spacing 属性来调整字符之间的间距，从而实现正确的省略号效果。具体方法是将 letter-spacing 设置为 0.05em 左右的值，以增加字符之间的间距。

多行截断例子：

<div class="ellipsis-multi">
  这是一段很长很长的文本，需要在多行中显示，并且超出一定长度后需要显示省略号。
</div>
//css
.ellipsis-multi {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3; /* 显示3行 */
}

在上面的代码中，使用 -webkit-box 布局，并将子元素按照垂直方向排列，从而实现了多行截断的效果。然后，通过设置 -webkit-line-clamp 属性来指定要显示的行数（这里是 3 行），当超过指定行数时，会自动显示省略号。

Mar 31 '23 08:03 yvonneit

.ellipsis {
  /* 限制在一行内显示 */
  white-space: nowrap;
  /* 超出部分用省略号表示 */
  text-overflow: ellipsis;
  /* 隐藏超出部分 */
  overflow: hidden;
}

Apr 28 '23 07:04 jacksmas

fe-hunter fe-hunter copied to clipboard

实现文本过长溢出处理

要实现的功能

代码示例

最佳答案评选标准

最佳答案

答题同学须知

围观同学须知

fe-hunter
fe-hunter copied to clipboard