为文本溢出提供另一个字符串时,字符颠倒:省略号; [英] 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屋!