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

I want to remove extra space on right side with ellipsis class.

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

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

11 个解决方案

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

#2

Just add:

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

and adjust the pixel until it matches (if u need it dynamic you can use em, % or vw/vh)

并调整像素直到它匹配(如果你需要动态,你可以使用em,%或vw / vh)

FIDDLE

Nimmi

#3

I think you looking for this...

我想你在找......

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

#4

That depend on the font-size and the font-family in this case you should set max-width: to 87px

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

#5

What about right signing text to the right?

如何正确签署文本?

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

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

There will be no space after ellipsis. It defends on the char in the text. For example try changing your text to hsdhhgasdihgasdgj and see the result.

省略号后将没有空格。它在文本中对char进行辩护。例如,尝试将文本更改为hsdhhgasdihgasdgj并查看结果。

#7

I created class .space-off which remove this space with margin-left help. Here is example:

我创建了类.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>

#8

If I understood correctly your request you want the two lines length equals...

如果我理解你的要求你想要两条线长等于......

If so you can add the letter-spacing property to the class ellipsis

如果是这样,您可以将字母间距属性添加到类省略号

here an example http://jsfiddle.net/c2o3pd2a/

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

#9

for firefox instead of text-overflow: ellipsis;

对于firefox而不是text-overflow:省略号;

use text-overflow: ellipsis '...'; or text-overflow: clip '...';

使用text-overflow:省略号'...';或文字溢出:剪辑'...';

for chrome it wont work https://code.google.com/p/chromium/issues/detail?id=133700

对于Chrome它不会工作https://code.google.com/p/chromium/issues/detail?id=133700

so use what i declared in forchrome class that would support for both, or detect the browser first and show html accordingly if you want to use text-overflow extra properties. In forchrome class just the change is that i have written margin-right:-1px to shift 1px from end of the string

所以使用我在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>

#10

try the following style

尝试以下风格

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

let me know if it is helpful

让我知道它是否有用

#11

You can add margin-right: -5px to your elipsis class

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

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

See working Fiddle

见工作小提琴