为文本溢出提供另一个字符串时，字符颠倒:省略号； [英] Reversed characters when providing another string to text-overflow: ellipsis;

问题描述

我试图从一开始就创建一个 text-overflow:省略号; ，但是在某些特定的上下文中，它会反转字符.

I'm trying to create a text-overflow: ellipsis; from the beginning, but in some specific context, it reverses the characters.

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

This is a CodePen to illustrate the problem: 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 ，但是它不起作用.

I tried all word-break properties, wrapping the string into another span to force it to be ltr but it don't work.

谢谢您的帮助

推荐答案

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

unicode-bidi might help you with an extra wrapper to handle text direction:

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

unicode-bidi CSS属性以及 direction 属性一起确定如何处理文档中的双向文本.例如，如果一个内容块包含从左到右和从右到左的文本，则用户代理将使用复杂的Unicode算法来决定如何显示文本. 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>

注意，额外的包装器需要保留内联元素(显示:内联)，内联框不会成为省略号规则的一部分，但会溢出到左侧，则块元素将在右侧溢出.

Note, that extra wrapper needs to remain an inline element (display:inline) , an inline-box will not be part of the ellipsis rule but will overflow to the left, a block element will overflow on the right.

这篇关于为文本溢出提供另一个字符串时，字符颠倒:省略号；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！