作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我希望添加省略号,以便仅显示 2 行文本。不应显示“香港大学”。
contentTitle___1tY09 {
margin: 0 0 0 1.2rem;
font-size: 1.1rem;
line-height: 1.2rem;
display: inline-block;
width: 100%;
color: #484848;
text-transform: capitalize;
}
最佳答案
.blue-back {
background-color:#0000ff2b;
}
.blue-back p.mb-0 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.row .col-md-4:last-child .blue-back {
background-color:red;
}
<div class="row">
<div class="col-md-4">
<div class="blue-back" style="width: 50px;">
<p class="mb-0 text-center text-white">Fase</p>
<p style="font-size:29px; font-weight:600;" class="mb-0 text-center text-white font-weight-600">kjshasjkhklahfsjkfdsf dsfsdfsdfsdnfds fdsfsdfdsjfdkfnds </p>
</div>
</div>
<div class="col-md-4">
<div class="blue-back">
<p class="mb-0 text-center text-white">Fase</p>
<p style="font-size:29px; font-weight:600;" class="mb-0 text-center text-white font-weight-600">1</p>
</div>
</div>
<div class="col-md-4">
<div class="blue-back">
<p class="mb-0 text-center text-white">Fase</p>
<p style="font-size:29px; font-weight:600;" class="mb-0 text-center text-white font-weight-600">1</p>
</div>
</div>
</div>
关于html - 2行文本后的省略号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58625147/
我是一名优秀的程序员,十分优秀!