Wort-Pause kombiniert mit Text-Überlauf

Question

Ich habe einen Container mit einer festen Breite und Text innen. Ich möchte, dass der Text word-break: break-word auf die zweite Zeile kann, und fügen Sie dann text-overflow: ellipsis der zweiten Zeile hinzu, wenn der Text noch zu lang ist. Ist das möglich?

Zum Beispiel würde badgerbadgerbadgerbadgerbadger in zwei separate Zeilen aufgeteilt werden, und in der zweiten Zeile (da es immer noch zu lang ist), wird am Ende Ellipsen haben.

const container = { 
    maxWidth: '140px', 
} 

const textStyle = { 
    display: 'block', 
    overflow: 'hidden', 
    whiteSpace: 'nowrap', 
    maxWidth: '140px', 
    textOverflow: 'ellipsis', 
    wordBreak: 'break-word', //doesn't work 
} 

render() { 
    return (
     <div style={container}> 
      <p style={textStyle}>badgerbadgerbadgerbadgerbadger</p> 
     </div> 
    ) 
} 

Answer 1

Sie können das tun, aber nicht so einfach wie eine Textzeile.

Es gibt mehrere Möglichkeiten, dies zu tun.

Check it out:

Pure CSS multiline text with ellipsis

-webkit-line-clamp: xx(lines to show); 

und

Line Clampin’ (Truncating Multiple Line Text)

Answer 2

Sie dotdotdot() Funktion helfen kann:

Lesen Sie weiter: http://dotdotdot.frebsite.nl/

Demo

Answer 3

Cross Lösung durch Pseudoelemente. Benötigt text-align: justify; und die gleiche background-color für Pseudoelement als Hintergrund der Eltern Einstellung:

/* styles for ellipsis '…' */ 
 
.block-with-text { 
 
    /* hide text when we have more than N lines */ 
 
    overflow: hidden; 
 
    /* for setting absolutely positioned ellisis '…' */ 
 
    position: relative; 
 
    line-height: 1.2em; 
 
    /* max-height = line-height × line number, 1.2 × 3 = 3.6 */ 
 
    max-height: 3.6em; 
 
    text-align: justify; 
 
    /* place for ellipsis '…' */ 
 
    padding-right: 1em; 
 
} 
 

 
/* creating ellipsis … */ 
 
.block-with-text:before { 
 
    content: "…"; 
 
    position: absolute; 
 
    /* ellipsis move to right bottom corner */ 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
/* hide ellipsis if we have text not more that maximum line numbers */ 
 
.block-with-text:after { 
 
    content: ""; 
 
    position: absolute; 
 
    /* move to the right bottom corner */ 
 
    right: 0; 
 
    /* setting width и height */ 
 
    width: 1em; 
 
    height: 1em; 
 
    margin-top: 0.2em; 
 
    /* hide ellipsis using white background */ 
 
    background: white; 
 
}

<div class="block-with-text"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div>

Answer 4

Für Webkit-Browser Sie diese CSS verwenden können:

.block-with-text { 
 
    border: 1px solid #000; 
 
    padding: 5px; 
 
    display: block; 
 
    display: -webkit-box; 
 
    max-width: 400px; 
 
    -webkit-line-clamp: 4; /* max line number */ 
 
    -webkit-box-orient: vertical; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="block-with-text"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div>