div içinde metni çok uzun kırp

86

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

very long text
</div>

sonraki yeni satırda gösterilmek yerine çok uzun metni kesmek için saf css kullanmanın herhangi bir yolu ve yalnızca maksimum 100 piksel göster

html css

— Cometta
kaynak

56

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

Bu aklıma gelen olası bir yaklaşım

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

Bu şekilde, uzun metin yine de kaydırılacak, ancak overflowayar nedeniyle ve ile line-heightaynı ayarlandığında görünmeyecektir .height yalnızca bir satırın görüntülenmesini sağlıyoruz.

Demoyu burada ve etkileşimli örneklerle birlikte taşma özelliği açıklamasını görün .

— Davor Lucic
kaynak

1

Kaydırmayı önlemek için "satır yüksekliği" ne güvenmezdim, çünkü kullanıcı tarayıcıdaki yazı tipi ayarlarını (daha küçük metin için) değiştirmiş olabilir. Aynı şekilde büyük yazı tipleri için, div yüksekliğini piksel sayısına sabitlediyseniz, bu korkunç görünebilir. Özellikle mobil tarayıcılarda ve "retina" ekranlarda, tasarım düzeni izin veriyorsa div yüksekliğini esnek bırakmaya çalışırdım - ki bu olmalı!

— PJ Brunet

155

Kullanabilirsiniz:

overflow:hidden;

metni bölgenin dışında gizlemek için.

Son harfi kesebileceğini unutmayın (bu nedenle son harfin bir kısmı yine de görüntülenecektir). Daha güzel bir yol, sonunda bir üç nokta göstermektir. Bunu kullanarak yapabilirsiniz text-overflow:

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

— Arseni Mourzenko
kaynak

white-space: nowrap gerçekten o kadar gerekli değil çünkü uzun bir dosya yolunu gösteren birden fazla satırım var. Beyaz boşluk olmadan, uzun kırılmaz yol üç noktayı alır, ardından bir sonraki satır yolun geri kalanını gösterir. Kicker, metni kopyalayabilirim (üç nokta dahil) ve sonra tüm yolu yapıştırabilirim. Güzel!

— Robert Koch

Merak ediyorsanız (benim gibi) üç nokta Firefox'un eski sürümlerinde çalışmayacaktır. "Firefox sürüm 7'den beri text-overflow: üç nokta desteklenmektedir." stackoverflow.com/questions/5990414/…

— PJ Brunet

tam metni veya benzer bir şeyi görüntülemek için fareyle üzerine gelindiğinde bir araç ipucunun olmasını istersen ne olur?

— pedrorijo91

2

@ pedrorijo91 Sadece html'de kullanabilirsiniz title="full text goes here".

— Jerry

28

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

http://jsfiddle.net/hT3YA/

— s1ntez
kaynak

9

Neden göreli birimler kullanılmıyor?

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

— Tomas Macek
kaynak

4

Aşağıdaki kod, metninizi karar verdiğiniz sabit genişlikte gizleyecektir. ancak duyarlı tasarımlar için pek doğru değil.

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

Güncelleme

(Mobil) cihazlarda metnin (sabit genişlik) nedeniyle birbirleriyle (karışık) olduğunu fark ettim ... bu nedenle yukarıdaki kodu aşağıdaki gibi duyarlı bir şekilde gizlenecek şekilde düzenledim:

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

(Maksimum genişlik), (ekran boyutu) ne olursa olsun metnin duyarlı bir şekilde gizlenmesini ve birbiriyle karışmamasını sağlar.

— Mizo Oyunları
kaynak

3

Bu kod soruyu yanıtlayabilirken, bu kodun soruyu neden ve / veya nasıl yanıtladığına ilişkin ek bağlam sağlamak, uzun vadeli değerini artırır.

— Donald Duck

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>

Snippet'i genişlet

— Supriya
kaynak