Saya punya masalah ini. Saya memiliki 3 baris teks dan elipsis. Saya membutuhkan kata-kata yang lengkap dan tidak memotongnya, tetapi jika saya menambahkan spasi sekarang, baris diubah menjadi hanya 1. Adakah bantuan? adalah masalah kompatibilitas? Fiddle: https://jsfiddle.net/vxfy0Lna/1/

.clinic-description {
   font-family: OpenSans, sans-serif;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-align: center;
    margin-bottom: 16px;
  
}
<span class="clinic-description" id="testObject">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore12345678 magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </span>
css
0
Franco Echevarría 28 Februari 2020, 14:50

1 menjawab

Jawaban Terbaik

Dipecahkan dengan mixin ini

@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white){
  overflow: hidden;
  position: relative;
  line-height: $lineHeight;
  max-height: $lineHeight * $lineCount; 
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  &:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
  }
  &:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: $bgColor;
  }
}

.block-with-text {
  @include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 3, $bgColor: white);  
}
0
Franco Echevarría 28 Februari 2020, 13:50