javascript 使用css截断特定字符长度后的字符串

8qgya5xd 于 2023-02-28 发布在 Java

关注(0)|答案(4)|浏览(147)

我从API得到了低于id的值，

F4EF9B435R4T9234FGHDAE34JH5TT4

我需要截断这个文本到下一行后，确切的18个字符像这样，

F4EF9B435R4T9234FG
HDAE34JH5TT4

我试过给出maxWidth，但有时在18个字符或17个字符后会被截断。

4条答案

使用ch单元截断特定字符长度后的字符串。

div {
            width: 18ch;
            background: #eee;
            word-break: break-all;
            font-family: monospace;
        }

<div>F4EF9B435R4T9234FGHDAE34JH5TT4</div>

div {
  width: 145px;
  background: #eee;
  word-break: break-all;
  font-family: monospace;
}

<div>F4EF9B435R4T9234FGHDAE34JH5TT4</div>

使用CSS的一个解决方案如下所示，使用max-inline-size：

#test{
  max-inline-size: 20ch;
  word-break:break-all;
  font-size:15px;
}

<div id="test">F4EF9B435R4T9234FGHDAE34JH5TT4</div>

根据font-size值调整ch中的max-inline-size值。
如果可能的话，你也可以使用javascript来实现同样的效果，如下面的代码所示：
一个二个一个一个

您可以使用css word-break属性。有关详细信息，请参阅mdn docs。