metin taşması: üç nokta çalışmıyor

Bu denedim ( buraya bakın ):

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Aslında, pencere küçük yapıldığında açıklığın üç nokta ile küçülmesini istiyorum. Neyi yanlış yaptım?

CSS overflow, width(veya max-width) display, ve özelliklerine sahip olmanız gerekir white-space.

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

Ek Çizgi kenetleme tekniklerine genel bir bakış istiyorsanız (Çok Satırlı Taşma Elipsleri), şu CSS-Püf Noktaları sayfasına bakın: https://css-tricks.com/line-clampin/

Ek2 (Mayıs 2019)
Bu bağlantıda iddia edildiği gibi Firefox 68 destekleyecek -webkit-line-clamp(!)

Bir blok öğeniz, maksimum boyutunuz olduğundan ve taşmayı gizli olarak ayarladığınızdan emin olun. (IE9 ve FF 7'de test edilmiştir)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

Chrome'da çok satırlı kullanım için:

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

Youtube'dan ;-) esinlenerek

Krom altında üç nokta ile ilgili bir sorunum vardı. Beyaz alanı açmak: nowrap bunu düzeltiyor gibiydi.

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

word-wrap: break-word;

bu ve sadece bu benim için bir iş yaptı

<pre> </pre> 

etiket

başka her şey üç nokta yapamadı ....

Sadece bununla karşılaşabilecek herkes için bir kafa ... H2'm miras alıyordu

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

bu üç noktaya izin vermiyordu. Görünüşe göre bu çok şık değil mi?

Beğendiğiniz yere aşağıdaki kodu ekleyin

misal

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

Birden fazla hat için

Chrome'da, birden fazla satıra üç nokta uygulamanız gerekiyorsa bu css'yi uygulayabilirsiniz.

Ayrıca , belirli genişlikteki öğeyi belirtmek için css'nize genişlik de ekleyebilirsiniz :

.multi-line-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

CSS'ye aşağıdakileri ekleyerek üç nokta kullanmayı deneyebilirsiniz:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Ama bu kod sadece tek satırlık düzeltme için geçerli gibi görünüyor. Metni kırpmanın ve üç nokta göstermenin diğer yollarını bu web sitesinde bulabilirsiniz: http://blog.sanuker.com/?p=631

Elipsin çalışması için CSS'ye aşağıdaki satırları ekleyin

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

Bu bizler için sabit genişlik kullanmak istemiyorsanız , o da kullanarak çalışır display: inline-grid. Yani gerekli özelliklerin yanı sıradisplay

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}