Как обрезать текст?

Question

Вот мой скриншот:

и это мой следующий код:

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

Мой вопрос, как обрезать мой текст, если он выходит из DIV? Я хочу, чтобы мой текст обрезался, как вторая коробка. Скажите, пожалуйста, как это сделать.

Answer 1

Вы должны добавить это в свой стиль.

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

Demo

Answer 2

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> 

Here хорошее объяснение того, что происходит.

Answer 3

Используйте overflow и text-overflow CSS правило

div { 
 
    overflow: hidden 
 
    text-overflow: hidden 
 
}

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

text-overflow будет работать только тогда, когда свойство переполнения контейнера имеет значение, скрытое, прокрутка или авто и белое пространство: Nowrap, как описаны в ссылка ниже

This site хорошо рассказывает об этой теме, если вы хотите узнать больше

Answer 4

Установите следующие свойства стиля:

• 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

Установить стиль text-overflow, white-space, overflow свойство:

<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

Добавить CSS в код:

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

Вот код, чтобы обрезать текст с помощью CSS или 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)+'...') ; 
    } 
}); 

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

Благодаря