CSS/JS buldum konteyner

Question

sığacak sadece tam sözcükleri gösteriyor ki makale

https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/

ve bunu kaba uyuyorsa Tüm kelimeyi görüntülemek için zorlamak için nasıl merak ediyorum:

örn.

some long sentence 

o yüzden bunu gizlemek istediğiniz ve sadece göstermek uymuyor

some long s... 

kelime sentence olarak gösterilebilir

:

some long 

benim şimdiki css (ekler ...)

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

Answer 1

Metni belirli bir karakter sayısına sınırlandırabilirsiniz. Sonra bir boşluk karakterinin son indisini bulmalı ve bu endeksi kullanarak metni tekrar sınırlandırmalısınız. Simply

div{ 
white-space: nowrap; 
width: 70px; 
overflow: hidden; 
} 
div > p{ 
white-space: nowrap; 
width: 70px; 
overflow: hidden; 
} 

<div><p>some long sentences</p></div> 
<div>some long sentences</div> 

Answer 2

bu deneyin:

function limitText(text, maxLength) { 
    if (text.length <= maxLength) { 
     return; 
    } 

    text = text.substr(0, maxLength); 

    var lastSpace = text.lastIndexOf(' '); 

    return text.substr(0, lastSpace) + '...'; 
} 

limitText('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 20); 

sadece bu kodu kullanabilirsiniz kelime sayısını sınırlamak isterseniz: Burada

bazı örnek kod metni taşmasına izin ver

.short { 
    max-width: 250px; 
    height: 1em; 
    overflow: hidden; 
    position: relative; 
} 

Answer 3

var maxWords = 4; 
var text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'; 
var newText = text.split(' ').slice(0, maxWords).join(' '); 

Answer 4

Bu deneyebilirsiniz:

.element{ 
 
    display: block; 
 
    width: 100px; 
 
    overflow: hidden; 
 
    word-wrap: break-word; 
 
    text-overflow: ellipsis; 
 
    max-height: 16px; 
 
    line-height: 16px; 
 
}

<div class="element">some long string</div>

max-height burada: = line-height: <number-of-lines>