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

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

very long text
</div>

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

Ответ 1

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

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

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

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

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

Ответ 2

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

overflow:hidden;

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

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

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

Ответ 3

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

http://jsfiddle.net/hT3YA/

Ответ 4

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

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

Update

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

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

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