css 文本溢出更改省略号内容

ryevplcw  于 2022-12-24  发布在  其他
关注(0)|答案(2)|浏览(169)

一位客户发给我一种字体,其中的'...'字符没有定义(它只显示了一个镜像反转的'3')。所以我想这样做:

.myclass ul li{
    text-overflow: ellipsis;
    text-overflow-content: '...';
}

你知道我该怎么做吗

iovurdzv

iovurdzv1#

您 * 可以 * 将text-overflow的值设置为字符串,如下所示:

.myclass ul li{
    text-overflow: '...';
}

然而:

  • 它有可怕的浏览器支持(只有在Firefox和边缘)
  • 它只在CSS的编辑器草稿中指定,所以它很可能被删除/更改。

在草案中,它甚至说:
注意:<string>值、2值语法"{1,2}"和功能都存在风险。

基本上,* 不使用字符串值 *。

正因为如此,如果溢出不必是动态的,我将只使用一个类,如果是动态的,则使用JS。

    • JS解决方案**

x一个一个一个一个x一个一个二个一个x一个一个三个一个
JS解决方案非常简单:
1.检查元素滚动宽度是否比实际宽度宽(意味着它有溢出)
1.循环,删除最后一个字符,直到滚动宽度 * with * after伪元素内容小于宽度。

5sxhfpxr

5sxhfpxr2#

在您的情况下,如果省略号字符的格式不正确或缺失,您也可以设置一个自定义字体风格,使您可以仅对该省略号字符使用不同的字体:

@font-face {
  font-family: "ellipsis-font";

  /*
   * Change this to whatever font you want.
   * It's Courier here to make it clear it changed from the default
   */
  src: local("Courier");

  /*
   * The unicode for ellipsis ("…").
   * Makes it so this font only gets applied for that single character
   */
  unicode-range: U+2026;
}

.my-container {
  width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /*
   * Putting our custom font in the front ensures
   * it handles the ellipsis display, the second font
   * in line should handle everything else
   */
  font-family: ellipsis-font, 'Times New Roman', serif;
}
<div class="my-container">This is some lengthy text that is bound to get cut off by overflow</div>

相关问题