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

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

very long text
</div>

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

5 59
html css css3

5 ответов:

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

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

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

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

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

44

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

overflow:hidden;

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

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

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;
123
.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  width:100px; 
}​

http://jsfiddle.net/hT3YA/

23

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

.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) убедитесь, что текст будет скрыт ответно независимо от (Размер экрана) и не будет смешиваться с друг с другом.

1

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

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