обрезать текст слишком долго внутри div

Question

<div style="display:inline-block;width:100px;">

very long text
</div>

любой способ использовать чистый CSS для вырезания слишком длинного текста, а не показывать на следующей новой строке и показывать только максимум 100px

Answer 1

Вы можете использовать:

overflow:hidden;

чтобы скрыть текст вне зоны.

Обратите внимание, что он может вырезать последнюю букву (поэтому часть последней буквы все равно будет отображаться). Более хороший способ - показать многоточие в конце. Вы можете сделать это, используя text-overflow:

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;

Answer 2

<div class="crop">longlong longlong longlong longlong longlong longlong </div>​

Это один из возможных подходов, который я могу придумать

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}​

Таким образом, длинный текст будет по-прежнему переноситься, но не будет виден из-за установленного overflow, и, установив line-height, как и height, мы обеспечиваем отображение только одной строки.

См. демо здесь и красивое свойство переполнения описание с интерактивными примерами.

Answer 3

.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  width:100px; 
}​

http://jsfiddle.net/hT3YA/

Answer 4

Почему бы не использовать относительные единицы?

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 5

Ниже код будет скрывать ваш текст с фиксированной шириной, которую вы решите. но не совсем подходит для адаптивных дизайнов.

.CropLongTexts {
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Обновление

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

.CropLongTexts {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

(максимальная ширина) гарантирует, что текст будет быстро скрыт независимо от размера экрана и не будет смешиваться друг с другом.