文本里面的div需要被拆分和...顯示如果文本很長

我有一個要求，我需要顯示div內的文本。有喜歡的幾個條件，如果文本長度過長我需要分割文本，並將其顯示在第二行文本里面的div需要被拆分和...顯示如果文本很長

我試圖通過我們下面的CSS來實現解決方案，

.div{ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -webkit-line-clamp: 2; 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    line-height: 10px; 
    height: 20px; 
    font-size:13px; 
    text-align: left; 
    }

但問題是，如果第一個文本本身過長，如：

Helooooooooooooooooooo這是文本

結果不正確正在添加

來源

2017-02-22 Rohitesh

嘗試word-break財產，

word-break: break-all;

來源

2017-02-22 05:38:20

我想它的工作Hellooiiiiiiiiooooooob SSSS的文字，這是很長，但它可以顯示在同一行例如，第一個字符：Heloooiiiiiooobbbb SSS .. – Rohitesh

做什麼你意思是？請用新的截圖更新問題。 –

請參閱編輯的問題**「預期的輸出很少修改」** – Rohitesh

使用省略號

.overflow { 
 
    width: 120px; 
 
    height:30px; 
 
    outline: 1px solid red; 
 
    margin: 0 0 2em 0; 
 
    /** 
 
    * Required properties to achieve text-overflow 
 
    */ 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
.ellipsis { 
 
    text-overflow: ellipsis; 
 
}

<div class="overflow ellipsis">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</div>

來源

2017-02-22 05:42:15

見fiddle

HTML

<div class="div"> 
Helooooooooooooooooooo this is text 
</div>

CSS

.div{ 
overflow: hidden; 
text-overflow: ellipsis; 
-webkit-line-clamp: 2; 
display: -webkit-box; 
-webkit-box-orient: vertical; 
line-height: 10px; 
height: 20px; 
font-size:13px; 
text-align: left; 
word-break: break-all; 
width:50px; 
background:#ccc; 
}

來源

2017-02-22 05:44:19

它不適用於Mozilla Firefox – Rohitesh

文本里面的div需要被拆分和...顯示如果文本很長

回答

相關問題