CSS/JS chỉ hiển thị toàn bộ từ phù hợp để container

Question

tôi đã tìm thấy rằng bài viết

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

và tôi tự hỏi làm thế nào để buộc để hiển thị toàn bộ một từ nếu nó phù hợp với container:

ví dụ

some long sentence 

nó có thể được hiển thị như

some long s... 

từ sentence không phù hợp vì vậy tôi muốn giấu nó và chỉ hiển thị:

some long 

css hiện tại của tôi (nó thêm ...)

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

Answer 1

Bạn có thể giới hạn văn bản thành một số ký tự nhất định. Sau đó, bạn phải tìm chỉ mục cuối cùng của ký tự khoảng trắng và giới hạn văn bản một lần nữa bằng chỉ mục này.

Dưới đây là một số mã ví dụ:

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); 

Nếu bạn chỉ muốn giới hạn số lượng từ bạn có thể sử dụng mã này:

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

Answer 2

Hãy thử điều này,

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 3

Simply hãy tràn văn bản

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

Answer 4

Bạn có thể thử này:

.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>

nơi max-height: = line-height: × <number-of-lines>