См. Раздел «Изменение текста» Размер Div

Question

У меня есть div, контейнер для некоторого содержимого, который изменяет размер, чтобы он мог вместить текст внутри него. Я хочу, чтобы размер div оставался статичным.

Я меняю этот контент динамически, и я хочу знать, когда текст слишком велик, чтобы помещаться внутри контейнера, и вырезать часть текста, из-за чего контейнер растет.

Что-то вроде этого:

Можно ли это сделать?

Answer 1

Я считаю, что для этого вам не нужен Javascript, но вы можете решить его только с помощью CSS. Дайте контейнер фиксированной высоту и скрыть переполнение:

div { 
 
    line-height: 1em; 
 
    height: 2em; 
 
    width: 10em; 
 
    border: 1px solid red; 
 
    overflow: hidden; 
 
    margin-bottom: 1em; 
 
}

<div> 
 
    bla bla bla<br /> 
 
    bla bla bla 
 
</div> 
 

 
<div> 
 
    Oh no<br /> 
 
    The container changed 
 
    its size to fix the text! 
 
    I've got to get rid some 
 
    of this annoying text 
 
</div>

Answer 2

Использование Css text-overflow:

Например:

text-overflow: clip; будет обрезать слово в контейнерах конца

text-overflow: ellipsis; войдет в «...» после последнего видимого символа.

HERE хороший Demo ...

Answer 3

Там нет слушателя изменения размера. Вы можете установить интервал, который проверяет высоту (пример ниже). Или еще лучше: выполнить проверку при обновлении текста!

setInterval(function() { 
 
    if ($('#the-container').height() > 42) { 
 
    // do something with container 
 
    } 
 
}, 50); // Can change time to whatever floats your boat

код не проверял, но я думаю, вы получите точку.

Answer 4

Да, это возможно. Вы можете исправить высоту div или контейнера и сделать переполнение-y auto;

скрипку демо:

.static{ 
 
    overflow-y:auto; 
 
    height:100px; 
 
    overflow-x:hidden; 
 
    width:200px; 
 
    border:1px solid red; 
 
} 
 
.right{float:right} 
 
.left{float:left}

<div class="static left">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> 
 

 

 
<div class="static right">esse cillum dolore eu fugiat </div>

https://jsfiddle.net/DhwaniSanghvi/31hryaw2/