文本溢出时在 <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 标签的底部添加“...”

像这样

我的代码在第一行显示了三个点，因为 white-space:nowrap。试过 white-space:pre-line，但没有用。

Answer 1

仅 CSS 无法做到这一点。你必须为此使用一些 JS。请查看在段落末尾添加三个点的简单 JQuery 代码。

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

.text-box{
height: 100px;
}

<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>

希望对您有所帮助

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

Adding three dots at the bottom of <p> tag when text overflows

css

overflow