Metnin 1 satırdan fazla yer almasını nasıl önleyebilirim?

332

Bir sözcük kaydırma veya metnin kaydırılmasını engelleyen başka bir özellik var mı? Bir yüksekliğim var overflow:hiddenve metin hala kırılıyor.

CSS3'ten önce tüm tarayıcılarda çalışması gerekir.

— Isherwood
kaynak

631

div {
  white-space: nowrap;
  overflow: hidden;
}

<div>test that doesn't wrap</div>

Snippet'i genişlet

Not: Bu yalnızca blok elemanlarında çalışır. Tablo hücrelerine bunu yapmanız gerekiyorsa (örneğin), tablo hücrelerinin tablo hücresi bloke etmediği için tablo hücresinin içine bir div koymanız gerekir.

CSS3 itibariyle, bu tablo hücreleri için de desteklenmektedir.

— cletus
kaynak

12

Beyaz boşluk! Aradığım şey bu ... 1.000 teşekkürler ... bu google için imkansız!

2

Word-wrap (IIRC) ... aptal IE adı verilen özel bir özellik de vardır.

— 09:55

21

Ayrıca "metin taşması: üç nokta;" Konteynır genişliğinizin sınırlarının dışına çıkarsa metninizin sonuna ... ekler

— Drew Landgrave

1

"Bu sadece blok öğeleri üzerinde çalışır" yorum doğru olduğunu düşünüyorum. Bunu bir çapa, paragraf, başlık vb. Olarak denerseniz bu çalışmaz. Böyle bir şey yapmalısınp.oneline { white-space:nowrap; overflow:hidden; display:block;}

— Alex Angelico

Taşmayı gizlemeye dikkat edin; iş demek.

— David A. Gray

57

Bunu CSS white-space Propertybaşarmak için kullanabilirsiniz .

white-space: nowrap

— Robert C. Barth
kaynak

36

Üç nokta kullanılması sonunda ... ekleyecektir.

   <style type="text/css">
    div {
      white-space: nowrap;
      overflow: hidden;
text-overflow: ellipsis;
    }
    </style>

— Vivek
kaynak

4

Bazen  boşluk yerine kullanmak işe yarayacaktır. Açıkçası olsa dezavantajları var.

— grossvogel
kaynak

Ne yazık ki, bu durumda yapamam

2

Sadece kristal netliğinde olmak için, bu paragraflar ve başlıklar vb ile güzel çalışır. Sadece belirtmeniz gerekir display: block.

Örneğin:

<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
  This is a really long title, but it won't exceed the parent width
</h5>

(satır içi stilleri affet)

— Duncan Jones
kaynak