Enveloppez un texte sur deux lignes seulement à l'intérieur d'un div.

Question

Je veux envelopper un texte dans seulement deux lignes à l'intérieur d'un div de largeur spécifique. Si le texte dépasse la longueur de deux lignes, je veux afficher des ellipses. Existe-t-il un moyen de faire cela en utilisant les CSS ?

par exemple

Sample text showing wrapping
of text in only two line...

Answer 1

Solution CSS uniquement pour Webkit

// Only for DEMO
$(function() {

  $('#toggleWidth').on('click', function(e) {

    $('.multiLineLabel').toggleClass('maxWidth');

  });

})

.multiLineLabel {
  display: inline-block;
  box-sizing: border-box;
  white-space: pre-line;
  word-wrap: break-word;
}

.multiLineLabel .textMaxLine {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Only for DEMO */

.multiLineLabel.maxWidth {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiLineLabel">
  <span class="textMaxLine">This text is going to wrap automatically in 2 lines in case the width of the element is not sufficiently wide.</span>
</div>
<br/>
<button id="toggleWidth">Toggle Width</button>

Answer 2

Essayez quelque chose comme ça : http://jsfiddle.net/6jdj3pcL/1/

<p>Here is a paragraph with a lot of text ...</p>

p {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    width: 300px;
}

p::before {
   content: '...';
   float: right;
   margin-top: 1.5em;
}

Answer 3

Typiquement, une troncature d'une ligne est assez simple

.truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

La troncature de deux lignes est un peu plus délicate, mais elle peut être réalisée avec css ; cet exemple est en sass.

@mixin multiLineEllipsis($lineHeight: 1.2rem, $lineCount: 2, $bgColor: white, $padding-right: 0.3125rem, $width: 1rem, $ellipsis-right: 0) {
  overflow: hidden; /* hide text if it is more than $lineCount lines  */
  position: relative; /* for set '...' in absolute position */
  line-height: $lineHeight; /* use this value to count block height */
  max-height: $lineHeight * $lineCount; /* max-height = line-height * lines max number */
  padding-right: $padding-right; /* place for '...' */
  white-space: normal; /* overwrite any white-space styles */
  word-break: break-all; /* will break each letter in word */
  text-overflow: ellipsis; /* show ellipsis if text is broken */

  &::before {
    content: '...'; /* create the '...'' points in the end */
    position: absolute;
    right: $ellipsis-right;
    bottom: 0;
  }

  &::after {
    content: ''; /* hide '...'' if we have text, which is less than or equal to max lines and add $bgColor */
    position: absolute;
    right: 0;
    width: $width;
    height: 1rem * $lineCount;
    margin-top: 0.2rem;
    background: $bgColor; /* because we are cutting off the diff we need to add the color back. */
  }
}

Answer 4

Voir http://jsfiddle.net/SWcCt/ .

Il suffit de définir un line-height la moitié de height :

line-height:20px;
height:40px;

Bien sûr, afin de faire text-overflow: ellipsis travail dont vous avez également besoin :

overflow:hidden;
white-space: pre;

Answer 5

La solution de @Asiddeen bn Muhammad a fonctionné pour moi avec une petite modification au css

    .text {
 line-height: 1.5;
  height: 6em; 
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: block;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
 }