向文本溢出提供另一个字符串时反转字符：省略号；

Question

我试图从头开始创建 text-overflow: ellipsis;，但在某些特定上下文中，它会颠倒字符。

这是一个CodePen来说明问题：https://codepen.io/DWboutin/pen/yLaoxog

HTML:

<div class="ellipsis">Path to you prefered files that you love so much forever and ever fuck yeah</div>
<div class="ellipsis">1":"#323130",messageLink:t?"#6CB8F6":"#005A9E",messageLinkHovered:t?"#82C7FF":"#004578",infoIcon:t?"#</div>

CSS:

div {
  margin: 10px 0;
  border: 1px solid black;
}
.ellipsis {
  width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
}

我尝试了所有 word-break 属性，将字符串包装到另一个跨度中以强制它成为 ltr 但它不起作用。

感谢您的帮助

Answer 1

unicode-bidi 可能会帮助您 使用额外的包装器 来处理文本方向：

https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi

The unicode-bidi CSS property, together with the direction property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The unicode-bidi property overrides this algorithm and allows the developer to control the text embedding.

div {
  margin: 10px 0;
  border: 1px solid black;
  width:max-content;
}

.ellipsis {
  width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
}

.ellipsis span {
  direction: ltr;
  unicode-bidi: bidi-override;
}

<div class="ellipsis">Path to you prefered files that you love so much forever and ever fuck yeah</div>
<div class="ellipsis"><span>1":"#323130",messageLink:t?"#6CB8F6":"#005A9E",messageLinkHovered:t?"#82C7FF":"#004578",infoIcon:t?"#</span></div>

original text :
<div>Path to you prefered files that you love so much forever and ever fuck yeah</div>
<div><span>1":"#323130",messageLink:t?"#6CB8F6":"#005A9E",messageLinkHovered:t?"#82C7FF":"#004578",infoIcon:t?"#</span></div>

注意，额外的包装器需要保持内联元素 (display:inline)，内联框不会成为一部分省略号规则但会向左溢出，块元素会向右溢出。

向文本溢出提供另一个字符串时反转字符：省略号；

Reversed characters when providing another string to text-overflow: ellipsis;

html

css

ellipsis