两行文字后的省略号

时间:2019-10-30 12:13:52

标签: html css ellipsis

我希望添加省略号,以便仅显示两行文本。不应显示“香港大学”。

enter image description here

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

1 个答案:

答案 0 :(得分:0)

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