文本溢出时，在<p>标签底部添加三个点

Question

这是我的HTML代码

 <section class="mammaliaSection">
            <p>ANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXT</p>
    </section>

这是我的CSS代码

#main section{
height:610px;
width:100%;
background-repeat:no-repeat;
background-size:cover;
position:relative;

}
 section p{
   position:absolute;
   display:block;
   width:325px;
   height:150px;
   font-size:36px;
   display:block;
   color:white;
   margin-left:15px;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
 }

我想在p标签的底部添加“...”

像这样

我的代码在第一行显示三个点，因为白色空间：nowrap。尝试过白色空间：预先行，但没有奏效。

Answer 1

你只能用CSS做到这一点。你必须使用一些JS。请看一个简单的JQuery代码，在段落末尾添加三个点。

＆＃13;

＆＃13;

while ($('p').outerHeight() > $('.text-box').height()) {
    $('p').text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

＆＃13;

.text-box{
height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-box">
<p>ANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL ANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL ANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL ANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL ANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL TEXTANIMAL </p>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助