如何解决向文本溢出提供另一个字符串时反转字符:省略号;
我试图从一开始就创建一个 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
,但它不起作用。
感谢您的帮助
解决方法
unicode-bidi
可能会帮助您使用额外的包装器来处理文本方向:
https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi
unicode-bidi
CSS 属性与 direction
属性一起决定如何处理文档中的双向文本。例如,如果一个内容块包含从左到右和从右到左的文本,则用户代理使用复杂的 Unicode 算法来决定如何显示文本。 unicode-bidi
属性会覆盖此算法并允许开发人员控制文本嵌入。
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",infoIcon:t?"#</span></div>
注意,额外的包装器需要保持内联元素 (display:inline) ,内联框不会是省略号规则的一部分,但会溢出到左边,一个块元素会在右边溢出。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。