CSS省略號將句子換成新行

當我在長字上有ellipsis時，它將id:和[ ]分解成不同的行。我似乎無法將它們全部放在一起。我試過white-space: nowrap和display: inline-block。有任何想法嗎？CSS省略號將句子換成新行

https://jsfiddle.net/b35m449x/4/

HTML

<div class="container">id: [<div class="trunc">userrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</div>]</div>

CSS

.container { 
    display: inline-block; 
    white-space: nowrap; 
    border: 1px solid black; 
    width: 100%; 
} 
.trunc { 
    width: 100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    white-space: nowrap; 
}

來源

2016-10-15 Mel

這可能是因爲另一個div在代碼中使用的發生。如果您不需要div只是將其刪除，並修改容器是這樣的：

.container { 
display: inline-block; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
-o-text-overflow: ellipsis; 
border: 1px solid black; 
width: 100%; 
}

它會正常工作。

雖然如果您希望在該特定行（userrr ...）上使用單獨樣式，那麼您可能需要用span元素替換div。請注意，此處還需要在container類中定義ellipsis和overflow。

希望它有點幫助！

來源

2016-10-15 06:08:10

這幾乎工作，但我需要在月底最後關閉支架和不去也行:)也有類似的需要在同一行。 – Mel

到目前爲止謝謝你！我試圖把閉括號放在一個單獨的div中，並在兩個div上放置浮動塊，但是這並不能將它放在旁邊... – Mel

'.container { display：inline-block; white-space：nowrap; 邊框：1px純黑色; //寬度：100％; } 。trunc {overflow：hidden; white-space：nowrap; text-overflow：ellipsis; width：150px; display：inline-block; vertical-align：top; }' 讓你的'trunc'成爲一個範圍，然後用它作爲CSS，看它是否有效。 –

Pseudoelements救援！ https://jsfiddle.net/0pmzq3p4/

.container { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    border: 1px solid black; 
 
    width: 100%; 
 
} 
 
.trunc { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    -o-text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
.trunc::before, 
 
.trunc::after { 
 
    white-space: pre; 
 
} 
 
.trunc::before { 
 
    content: 'id: [\A\00a0'; 
 
} 
 
.trunc::after { 
 
    content: '\A]'; 
 
}

<div class="container"> 
 
    <div class="trunc"> 
 
userrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr 
 
    </div> 
 
</div>

來源：

我的知識
https://stackoverflow.com/a/17047836/915875
https://stackoverflow.com/a/5467676/915875

來源

2016-10-15 07:13:26 elektronik

找到更新的小提琴，應該工作正常。更新的代碼是：

.container { 
    display: inline-block; 
    white-space: nowrap; 
    border: 1px solid black; 
    width: 100%; 
    vertical-align:bottom; 
} 
.trunc { 
    width: 20%; 
    display: inline-block; 
    vertical-align:bottom; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    white-space: nowrap; 
}

通知附加顯示：inline-block的

更新小提琴 - https://jsfiddle.net/b35m449x/4/

來源

2016-10-15 07:29:15

CSS省略號將句子換成新行

回答

相關問題