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

86

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

very long text
</div>

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

html css

— комета
источник

56

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

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

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

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

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

— Давор Лючич
источник

1

Я бы не стал рассчитывать на «line-height» для предотвращения переноса, потому что возможно, что пользователь изменил настройки шрифта (для меньшего текста) в браузере. Точно так же для больших шрифтов, если вы установили высоту div на количество пикселей, это может выглядеть ужасно. Я бы попытался оставить высоту div гибкой, особенно с мобильными браузерами и экранами "retina", если позволяет макет дизайна - что должно быть!

— PJ Brunet

155

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

overflow:hidden;

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

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

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

— Арсений Мурзенко
источник

white-space: nowrap на самом деле не так уж и необходим, потому что у меня есть несколько строк, показывающих длинный путь к файлу. Без пробела длинный неразрывный путь будет отмечен многоточием, затем следующая строка покажет остальную часть пути. Самое интересное в том, что я могу скопировать текст (включая многоточие), а затем вставить весь путь. Ницца!

— Роберт Кох

Если вам интересно (как и мне), многоточие не будет работать в старых версиях Firefox. «Начиная с Firefox версии 7 поддерживается переполнение текста: многоточие». stackoverflow.com/questions/5990414/…

— PJ Brunet

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

— pedrorijo91

2

@ pedrorijo91 Вы можете просто использовать title="full text goes here"в html.

— Джерри

28

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

http://jsfiddle.net/hT3YA/

— s1ntez
источник

9

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

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

— Томаш Мацек
источник

4

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

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

— Игры Mizo
источник

3

Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, улучшает его долгосрочную ценность.

— Дональд Дак

1

   .cut_text {
      white-space: nowrap; 
      width: 200px; 
      border: 1px solid #000000;
      overflow: hidden;
      text-overflow: ellipsis;
    }

<div class="cut_text">

very long text
</div>

Развернуть фрагмент

— Суприя
источник