如何用省略號刪除右側的額外空間

Question

我想用省略號類刪除右側的額外空格。

 .ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; } div{ float:left; } .clear { clear:both } 

 <div class="ellipsis">hsdhhgasdhgasdgj</div><div>asdasd</div> <div class="clear"></div> <div class="ellipsis">asdasdasd</div><div>asdadsas</div> 

Answer 1

.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
    float:left;
}

.clear {
    clear:both
}
<div class="ellipsis">Some Text</div><div>asdasd</div>
<div class="clear"></div>
<div class="ellipsis">Some Text</div><div>asdadsas</div>

Answer 2

只需添加：

div:nth-child(2n){
    margin-left: -4px;
}

並調整像素直到匹配（如果你需要動態，你可以使用em，％或vw / vh）

小提琴

尼米

Answer 3

我想你在尋找......

 .ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; float:left; } .clear { clear:both } 

 <div class="ellipsis">hsdhhgasdhgasdgj</div><div>asdasd</div> <div class="clear"></div> <div class="ellipsis">asdasdasd</div><div>asdadsas</div> 

Answer 4

這取決於font-size和font-family在這種情況下，您應該將max-width:設置為87px

Answer 5

如何正確簽署文本？

 .ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; text-align: right; float: left; } .clear { clear:both } 

 <div class="ellipsis">hsdhhgasdhgasdgj</div><div>asdasd</div> <div class="clear"></div> <div class="ellipsis">asdasdasd</div><div>asdadsas</div> 

Answer 6

 .ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; } div{ float:left; } .clear { clear:both } 

 <div class="ellipsis">hsdhhgasdihgasdgj</div><div>asdasd</div> <div class="clear"></div> <div class="ellipsis">asdasdasd</div><div>asdadsas</div> 

ellipsis后沒有空格。 它在文本中對char進行辯護。 例如，嘗試將文本更改為hsdhhgasdihgasdgj並查看結果。

Answer 7

我創建了類.space-off ，它使用margin-left幫助刪除了這個空格。 這是一個例子：

 .ellipsis { white-space: pre; overflow: hidden; text-overflow: ellipsis; max-width: 90px; float:left; } .space-off { margin-left: -6px; } div { float:left; } .clear { clear:both } 

 <div class="ellipsis">hsdhhgasdhgasdgj</div> <div class="space-off">asdasd</div> <div class="clear"></div> <div class="ellipsis">asdasdasd</div><div>asdadsas</div> 

Answer 8

for firefox而不是text-overflow: ellipsis;

使用text-overflow: ellipsis '...'; 或text-overflow: clip '...';

對於Chrome它不會工作https://code.google.com/p/chromium/issues/detail?id=133700

所以使用我在forchrome類中聲明的支持兩者的內容，或者首先檢測瀏覽器並相應地顯示html如果你想使用文本溢出額外的屬性。 在forchrome類只是改變是我寫了margin-right:-1px從字符串的末尾移位1px

 .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; } .elipdot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis'...'; max-width: 90px; } .elipclip { white-space: nowrap; overflow: hidden; text-overflow: clip'...'; max-width: 90px; } .forchrome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; border: 1px solid #930; margin-right: -1px; } div { float: left; /** for debugging**/ border: 1px solid green; } .clear { clear: both } 

 <!-- previous code using default--> <div class="ellipsis">hsdhhgasdhgasdgj</div> <div>asdasd</div> <div class="clear"></div> <div class="ellipsis">asdasdasd</div> <div>asdadsas</div> <!-- will not work on chrome https://code.google.com/p/chromium/issues/detail?id=133700 <!-- using text-overflow: ellipsis '...'; --> <div class="elipdot">hsdhhgasdhgasdgj</div> <div>asdasd</div> <div class="clear"></div> <div class="elipdot">asdasdasd</div> <div>asdadsas</div> <!-- using text-overflow: clip '...'; --> <div class="elipclip">hsdhhgasdhgasdgj</div> <div>asdasd</div> <div class="clear"></div> <div class="elipclip">asdasdasd</div> <div>asdadsas</div> <!-- previous for chrome--> <div class="forchrome">hsdhhgasdhgasdgj</div> <div>asdasd</div> <div class="clear"></div> <div class="frochrome">asdasdasd</div> <div>asdadsas</div> 

Answer 9

如果我理解你的要求你想要兩條線長度等於......

如果是這樣，您可以將letter-spacing屬性添加到類ellipsis

這里有一個例子http://jsfiddle.net/c2o3pd2a/

Answer 10

嘗試以下風格

.ellipsis {
   text-overflow:clip;
   max-width:100%;
}

讓我知道它是否有用

Answer 11

您可以在您的elipsis類中添加margin-right: -5px

.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
    margin-right: -5px;
}

見工作小提琴