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

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

very long text
</div>

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

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

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

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

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

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

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

overflow:hidden;

чтобы скрыть текст за пределами зоны.

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

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

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

http://jsfiddle.net/hT3YA/

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

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

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

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

Обновить

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

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

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