Wie trimme ich einen Text?

Question

Hier ist mein Screenshot:

und dies ist mein Code ein:

<div style="background:green; width:100px; height:27px;"> 
This is text to be written here 
</div> 

Meine Frage, wie mein Text zu trimmen, wenn es aus dem div geht? Ich möchte, dass mein Text wie die zweite Box getrimmt wird. Bitte sag mir, wie es geht.

Answer 1

Sie müssen dies zu Ihrem Stil hinzufügen.

text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

Demo

Answer 2

Verwenden Sie text-overflow: ellipsis; Eigenschaft mit white-space: nowrap; overflow: hidden;.

So wird Ihr Code wie folgt aussehen

<div style="background:green; width:100px; height:27px;text-overflow: ellipsis;white-space: nowrap; overflow: hidden;"> 
This is text to be written here 
</div> 

Here ist eine gute Erklärung, was vor sich geht.

Answer 3

Verwenden Sie die overflow und text-overflow CSS-Regel

div { 
 
    overflow: hidden 
 
    text-overflow: hidden 
 
}

<div style="background:green; width:100px; height:27px;"> 
 
This is text to be written here 
 
</div>

text-overflow wird nur funktionieren, wenn der Überlauf-Eigenschaft des Containers den Wert versteckt hat, blättern oder Auto und white-space: nowrap wie beschrieben in Der Link unter

This site spricht über das Thema gut, wenn Sie mehr erfahren möchten

Answer 4

Legen Sie die folgenden Stileigenschaften:

• text-overflow:ellipsis
• white-space:nowrap
• overflow:hidden

<div style="background:green; width:100px; height:27px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;"> 
 
This is text to be written here 
 
</div>

Answer 5

Stellen Sie den Stil text-overflow, white-space, overflow Eigenschaft:

<div style="background: green;height: 27px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px;"> 
 
This is text to be written here 
 
</div>

Answer 6

Fügen Sie diese CSS Code:

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

<div style="background:green; width:100px; height:27px;"> 
 
This is text to be written here 
 
</div>

Answer 7

Hier ist der Code, den Text mit CSS oder jquery

jquery

<div id="text"> 
This is text to be written here 
</div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    var text =$('#text').html(); 
    if(text.length>20){ 
    $('#text').html(text.substr(0,20)+'...') ; 
    } 
}); 

zu trimmen

Css

<div id="css"> 
This is text to be written here 
</div> 

#css { 
    text-overflow: ellipsis ; 
    background:green; 
    width:100px; 
    height:27px; 
    display:inline-block; 
    overflow: hidden; 
    white-space:nowrap; 
} 

Dank