适用于单行的文本溢出省略号ltr and rtl方向但省略号不起作用rtl方向。
如果我删除/改变方向rtl一切都运行良好。可能是什么错误？
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>
我知道这个问题已经很久了，但我为其他有同样问题的人回答一下。
我无法弄清楚它不适用于 rtl 的原因。但我有一个绝招！
-
首先你应该加上省略号：
<span class="ellipsis">...</span>
-
然后你应该在文本末尾留一个空格（无论你的文本是多行还是单行）
假设这是我们的文本：
<p class="text">blah blah</p>
。文本 {
最大高度：100%；
溢出：隐藏；
}
这将是我们的空白区域：
.text::after {
content: ' ';
display: block;
width: 30px;
height: 15px;
background-color: white;
float: left;
z-index: 2;
position: absolute;
}
因此，当您的文本是多行时，由于以下原因，空白将被隐藏overflow: hidden样式，您将在文本末尾看到省略号，当您的文本为一行时，空白将与省略号重叠并覆盖它，您将看不到省略号。
您可能需要修复省略号和空白的位置，以便魔法发挥作用。
该片段效果很好：
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
