Question

我想用省略号类删除右侧的额外空格。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

只需添加：

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

并调整像素直到匹配（如果你需要动态，你可以使用em，％或vw / vh）

FIDDLE

尼米

Answer 2

我认为你在寻找这个......

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这取决于font-size和font-family，在这种情况下，您应该将max-width:设置为87px

Answer 4

如何正确签署文本？

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

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

我创建了一个类.space-off，用margin-left帮助删除了这个空格。 Here就是例子：

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

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 8

如果我理解你的要求你想要两行长度等于......

如果是这样，您可以将letter-spacing属性添加到课程ellipsis

这是一个例子 http://jsfiddle.net/c2o3pd2a/

Answer 9

尝试以下风格

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

让我知道它是否有用

Answer 10

您可以将margin-right: -5px添加到您的elipsis类

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

见工作Fiddle

如何用省略号删除右侧的额外空间

10 个答案: