У меня есть длинный текст внутри div
с определеннымwidth
:
HTML:
<div>Stack Overflow is the BEST !!!</div>
CSS:
div {
border: 1px solid black;
width: 70px;
}
Как я мог заставить строку оставаться в одной строке (то есть быть обрезанным в середине "Переполнения")?
Я пытался использовать overflow: hidden
, но это не помогло.
white-space: nowrap
поместите это в свой тег стиля.Ответы:
Попробуй это:
источник
Используйте
white-space:nowrap
иoverflow:hidden
http://jsfiddle.net/NXchy/8/
источник
text-overflow:ellipsis;
к выше для лучшего взгляда.в вашем использовании CSS
white-space:nowrap;
источник
Ваш HTML код:
<div>Stack Overflow is the BEST !!!</div>
CSS:
Теперь результат должен быть:
источник
Все прыгали на этом !!! Я тоже сделал скрипку
http://jsfiddle.net/audetwebdesign/kh4aR/
RobAgar получает точку для указания в
white-space:nowrap
первую очередь.Здесь есть пара вещей, которые вам нужны,
overflow: hidden
если вы не хотите, чтобы дополнительные символы высовывались в ваш макет.Кроме того, как уже упоминалось, вы могли бы использовать
white-space: pre
(см. EnderMB), помня, чтоpre
не будет разрушать пробелы, тогда какwhite-space: nowrap
будет.источник
Дайте это попробовать. Он использует,
pre
а не так,nowrap
как я предполагаю, вы захотите, чтобы это<pre>
работало аналогично, но любой из них будет работать просто отлично:http://jsfiddle.net/NXchy/11/
источник
Я прыгнул сюда в поисках того же самого, но никто не работал для меня.
Есть случаи, когда независимо от того, что вы делаете, и в зависимости от системы (Oracle Designer: Oracle 11g - PL / SQL), div всегда будет переходить на следующую строку, и в этом случае вы должны использовать тег span вместо этого.
Это творило чудеса для меня.
источник
добавь это в свой div
http://jsfiddle.net/NXchy/1/
источник
было решение, которое работало для меня. В некоторых случаях с
div
-lists это необходимо.некоторые альтернативные значения направления,
row-reverse, column, column-reverse, unset, initial, inherit
которые делают то, что вы ожидаете от них делатьисточник
Попробуйте установить высоту, чтобы блок не увеличивался, чтобы вместить ваш текст, и сохраните
overflow: hidden
параметрРЕДАКТИРОВАТЬ: Вот пример того, что вы могли бы, если вам нужно отображать 2 строки в высоту:
источник
em
's вheight
гибкости, ключевой момент хорошо проиллюстрирован здесь в вашем примере.