多行从右到左文本方向的文本溢出省略号 [英] text overflow ellipsis for multi-line right to left text direction
问题描述
文本溢出省略号适用于单行 ltr 和 rtl 方向，但省略号不适用于 rtl 方向.
如果我删除/更改 rtl 的方向，一切运行正常.可能是什么错误?
index.html
<title>HTML 教程</title><风格>p{字体大小:14px；字体粗细:粗体；文本对齐:右；浮动:对；文本对齐:右；显示:-webkit-box；最大宽度:165px；-webkit-line-clamp: 4;-webkit-box-orient:垂直；溢出:隐藏；文本溢出:省略号；右边距:10px；行高:15px；方向:rtl；}</风格><身体><p>在 W3Schools，您将找到关于标签、属性、事件、颜色名称、实体、字符集、URL 编码、语言代码、HTTP 消息等的完整参考.</p></html>我知道这个问题很久以前，但我为其他有同样问题的人回答.
我无法弄清楚为什么它不适用于 rtl.但我已经骗过了！
首先你应该输入一个省略号:
...然后你应该在你的文本末尾留一个空格(不管你的文本是多行还是单行)
让我们假设它是我们的文本:<p class="text">blah blah</p>.text {最大高度:100%；溢出:隐藏；}
这将是我们的空白区域:
.text::after {内容: ' ';显示:块；宽度:30px；高度:15px；背景颜色:白色；向左飘浮;z-索引:2；位置:绝对；}因此，当您的文本是多行时，由于 overflow: hidden 样式，空白将被隐藏，您将在文本末尾看到省略号，而当您的文本为 1 时行，空白将与省略号重叠并覆盖它，您将看不到省略号.
您可能需要修正省略号和空格的位置，以便魔法发挥作用.
该代码段运行良好:
.text {高度:100%；溢出:隐藏；}.text::after {内容: ' ';显示:块；宽度:20px；高度:15px；背景颜色:粉红色；边距:0px 自动 0px 0px;z-索引:2；位置:相对；}.省略号{向左飘浮;边距顶部:-35px；}<br/><br/><div style="width: 200px; height: 35px; background: pink"><p class="text" dir="rtl">این یک<span class="省略号">...</span>
The text-overflow ellipsis working for single line ltr and rtl direction but ellipsis does not work with rtl direction.
If I remove/change the direction of rtl everything runs fine. what could be the bug?
index.html
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<style>
p{
font-size: 14px;
font-weight: bold;
text-align: right;
float: right;
text-align: right;
display: -webkit-box;
max-width: 165px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 10px;
line-height: 15px;
direction: rtl;
}
</style>
<body>
<p>At W3Schools you will find complete references about tags, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, and more.</p>
</body>
</html>
I know this question is for a long time ago, but I answer it for other people having the same question.
I couldn't figure out the reason why it doesn't work for rtl. But I have made a trick!
First You should put an ellipsis:
<span class="ellipsis">...</span>Then you should make a blank space at the end of your text (It doesn't matter if your text is multi-line or single-line)
Let's assume it is our text:
<p class="text">blah blah</p>.text { max-height: 100%; overflow: hidden; }
this is going to be our blank space:
.text::after {
content: ' ';
display: block;
width: 30px;
height: 15px;
background-color: white;
float: left;
z-index: 2;
position: absolute;
}
So when your text is multi-line, the white space will be hidden due to overflow: hidden style and you will see the ellipsis at the end of your text, and when your text is one line, the white space will overlap the ellipsis and cover it and you will see no ellipsis.
You may need to fix the position of your ellipsis and white space, so that the magic works well.
The snippet works well:
.text {
height: 100%;
overflow: hidden;
}
.text::after {
content: ' ';
display: block;
width: 20px;
height: 15px;
background-color: pink;
margin: 0px auto 0px 0px;
z-index: 2;
position: relative;
}
.ellipsis {
float: left;
margin-top: -35px;
}
<div style="width: 200px; height: 35px; background: pink">
<p class="text" dir="rtl">این یک متن آزمایشی است</p>
<span class="ellipsis">...</span>
</div>
<br/><br/>
<div style="width: 200px; height: 35px; background: pink">
<p class="text" dir="rtl">این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است</p>
<span class="ellipsis">...</span>
</div>
这篇关于多行从右到左文本方向的文本溢出省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
