CSS - как обрезать вывод текста?

Question

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

Как я могу обрезать вывод так, чтобы все, что находится "за" рамкой, не отображалось, или , как я могу заставить коробку создать вертикальную полосу прокрутки?

Answer 1

Для HTML:

<div id="smallBoxWithLotsOfText">There is way more text in here than what
    I have typed.  I mean, this text is long.  There is lots of it.  
    You can't even imagine how long this text is gonna get.  No joking.  
    It's long; it's very, very long.  It keeps going, and going, and going. 
    It's the Energizer Bunny of text.  Like, seriously dude.  It's crazy.  
    Absolutely crazy.
</div>

Попробуйте CSS:

#smallBoxWithLotsOfText {
    width: 100%;
    height: 100px;
    overflow: auto;
}

Свойство height указывает прямоугольнику, как высоко он должен быть. Свойство overflow указывает блоку добавлять полосу прокрутки, когда содержимое становится больше, но не всегда иметь полосу прокрутки (как scroll).

Вы можете увидеть это в действии .

Answer 2

обычно «переполнение: авто» должно работать, если есть установленная высота / ширина. Вы можете использовать полосу прокрутки с помощью «overflow: scroll». Вы можете скрыть что-либо с помощью 'overflow: hidden;'

Ключ к переполнению стилями CSS заключается в том, что браузер должен определить высоту и ширину, чтобы он знал, когда начинать переполнение.

Answer 3

Как я могу обрезать вывод так, чтобы все, что находится "за пределами", поле не отображалось

Использование overflow: hidden

Как заставитьполе для создания вертикальной полосы прокрутки?

Использовать overflow: auto.Однако, чтобы использовать это, убедитесь, что у вас есть ширина / высота, указанная в поле

Answer 4

Взгляните на overflow. overflow: hidden содержимое клипа, overflow:Scroll добавляет полосу прокрутки.

Answer 5

Свойство overflow.Вы можете установить значение hidden, чтобы скрыть данные, и scroll, чтобы прокрутить данные.

<div class="text">this is some text that would be very long...</div>

//Hidden
.text
{
    overflow: hidden;
    width: 50px;
    height: 50px
}
//Scroll    
.text
{
    overflow: scroll;
    width: 50px;
    height: 50px
}

Answer 6

Вы можете попробовать использовать многоточие, добавив в CSS следующее:

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

Дополнительные способы обрезки текста и отображения многоточия можно найти здесь: http://blog.sanuker.com/?p=631