gpt4 book ai didi

html - 文本省略号不适用于 RTL 方向?

转载 作者:可可西里 更新时间:2023-11-01 15:01:50 26 4
gpt4 key购买 nike

我正在尝试显示一些文本,(文本框的)最大高度为 4 行,如果文本较长,我想显示三个点 (...)。为了实现这种效果,这是我正在使用的代码:

.txt{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}

这基本上完全按照我的意愿工作,但是如果我将文本方向设置为 rtl,则不会显示三个点。不明白这是什么原因。 CodePen here .

.wrapper {
padding: 10px;
background: #eaeaea;
max-width: 400px;
margin: 20px;
}

.txt {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}

.demo-1 {
direction: ltr;
}

.demo-2 {
direction: rtl;
}
<div class="wrapper">
<p class="demo-1 txt">Working as intended.<br> 1daklssdj alskdj alkdjaslkdj alkdj alkdjalkdjalkdj alskdjalskdjlaskdj alkdj alkdj alkdjalkdjalkdj alskdjal skdj alksdj alskdj alkdj alksdj alskdj alskdj laskdj alksdj alkjd laksdj alskdj alskdj alkdj alskdj alskdj aslkdj alk</p>
</div>

<div class="wrapper">
<p class="demo-2 txt">NOT working. Why?? <br>daklsdj alskdj alkdjaslkdj alkdj alkdjalkdjalkdj alskdjalskdjlaskdj alkdj alkdj alkdjalkdjalkdj alskdjal skdj alksdj alskdj alkdj alksdj alskdj alskdj laskdj alksdj alkjd laksdj alskdj alskdj alkdj alskdj alskdj aslkdj alk</p>
</div>

最佳答案

请试试这个。在 css 中这是不可能的。

var myid=document.getElementById('txt1');
myid.innerHTML=myid.innerHTML.substring(0,241)+'...';

var myid=document.getElementById('txt2');
myid.innerHTML=myid.innerHTML.substring(0,241)+'...';
.wrapper {
padding: 10px;
background: #eaeaea;
max-width: 400px;
margin: 20px;
}
.demo-1 {
direction: ltr;
}
.demo-2 {
direction: rtl;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<p class="demo-1 txt" id="txt1">Working as intended.<br> 1daklssdj alskdj alkdjaslkdj alkdj alkdjalkdjalkdj alskdjalskdjlaskdj alkdj alkdj alkdjalkdjalkdj alskdjal skdj alksdj alskdj alkdj alksdj alskdj alskdj laskdj alksdj alkjd laksdj alskdj alskdj alkdj alskdj alskdj aslkdj alk</p>
</div>

<div class="wrapper">
<p class="demo-2 txt" id="txt2">NOT working. Why?? <br>daklsdj alskdj alkdjaslkdj alkdj alkdjalkdjalkdj alskdjalskdjlaskdj alkdj alkdj alkdjalkdjalkdj alskdjal skdj alksdj alskdj alkdj alksdj alskdj alskdj laskdj alksdj alkjd laksdj alskdj alskdj alkdj alskdj alskdj aslkdj alk</p>
</div>

关于html - 文本省略号不适用于 RTL 方向?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46401603/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com