时间戳

首页 > 解决方案 > 如果字符串不适合屏幕或在 Javascript 中确定范围，则截断字符串

javascript - 如果字符串不适合屏幕或在 Javascript 中确定范围，则截断字符串

问题描述

我需要找到一种基于特定范围或窗口截断字符串的智能方法。还有一个绝对的例子，那就是 Instagram 的个人资料页面。如果您去那里并减小屏幕尺寸，您会看到用户名每次都从最后一个字符分别裁剪到屏幕尺寸。

如何在 Javascript 中做到这一点？

标签： javascript

解决方案

在 CSS 中：

style="text-overflow: clip; overflow: hidden;
white-space: nowrap;"<br>
<div style="text-overflow: clip; overflow: hidden;
white-space: nowrap;">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40</div>
<hr>
style="text-overflow: ellipsis; overflow: hidden;
white-space: nowrap;"<br>
<div style="text-overflow: ellipsis; overflow: hidden;
white-space: nowrap;">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40</div>

使用 JavaScript（不推荐：CSS 推荐。1.5 允许边距/填充，希望它们不会是字体大小或更大。有点不确定......元素必须已经存在，如果元素宽度减小，则需要重新计算，松散/不存在'如果元素宽度增加/需要从变量等重新设置，则显示休息）：

var clipdiv=document.getElementById("divToClip");

while(
  parseFloat(getComputedStyle(clipdiv).height)
  >
  1.5*parseFloat(getComputedStyle(clipdiv).fontSize)
)
  clipdiv.innerText
  =
  clipdiv.innerText.slice(0,clipdiv.innerText.length-2);
<div id="divToClip">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40</div>

推荐阅读