文本溢出更改省略号的内容 [英] text-overflow change content of ellipsis

问题描述

一位顾客给我发了一个'...'字符未定义的字体（它只显示镜像反转的'3'）。所以我想这样做：

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

任何想法，我该怎么做？

解决方案

You can 实际上可以设置

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

然而：

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

在草稿中，它甚至表示：

注意：< string> 值，而2值语法{1,2}和功能都是有风险的。

基本上，不要使用字符串值

<正因为如此，如果溢出不一定是动态的，那么我只是使用一个类，如果它是动态的，就使用一个类。

JS解决方案

  var p = document.querySelector（。js-overflow）; if（p.scrollWidth> （p.offsetWidth）p.classList.add（has-overflow）; while（p.scrollWidth> p.offsetWidth）{p.innerHTML = p.innerHTML.slice（0，-1）;}  

p {width：200px; border：1px solid; padding：2px 5px; / *以下都是文本溢出所必需的* / white-space：nowrap; overflow：hidden;} has-overflow：after {content：...}

 < p class =js-overflow> < / p>  

A JS解决方案实际上是 简单。
$ b

1. 检查元素滚动宽度是否比实际宽度宽（意味着它有溢出）。


2. 循环，删除最后一个字符，直到在伪元素内容之后的的滚动宽度小于宽度。






A customer sent me a font where the '...'-character is not defined (it only shows up a mirror-inverted '3'). So i wanted to do something like:

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

any idea, how I can do this?

解决方案

You can actually set the value of text-overflow to string, like:

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

However:

• It has horrible browser support(Only in Firefox and maybe edge)
• It's only specified in the editors draft for CSS, so it could very well be removed/changed.

In the draft, it even says:

Note: The <string> value, and the 2-value syntax "{1,2}" and functionality are all at risk.

Basically, don't use the string value.

Because of this, I'd just use a class if the overflow doesn't have to be dynamic, or JS if it does.

JS Solution

var p = document.querySelector(".js-overflow");

if (p.scrollWidth > p.offsetWidth) p.classList.add("has-overflow");

while (p.scrollWidth > p.offsetWidth) {
  p.innerHTML = p.innerHTML.slice(0, -1);
}

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;
  /* BOTH of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
}
.has-overflow:after {
  content: "..."
}

<p class="js-overflow">
  Testing overflow yaya look at me !
</p>

A JS solution is actually really simple.

1. Check if the elements scroll width is wider than it's actual width(meaning it has an overflow)
2. Loop, removing the last character until the scroll width with the after pseudo elements content is less than the width.

这篇关于文本溢出更改省略号的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！