Как удалить дополнительное пространство с правой стороны с помощью многоточия

Ответ 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

Просто добавьте:

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

и отрегулируйте пиксель, пока он не совпадёт (если вам нужна динамика, вы можете использовать em,% или vw/vh)

FIDDLE

Нимми

Ответ 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>

Ответ 4

Это зависит от font-size и font-family. В этом случае вы должны установить max-width: в 87px

Ответ 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>

Ответ 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>

Ответ 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>

Ответ 8

для firefox вместо text-overflow: ellipsis;

использовать text-overflow: ellipsis '...'; или text-overflow: clip '...';

для хром он не будет работать 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>

Ответ 9

Если я правильно понял ваш запрос, вы хотите, чтобы длина двух строк была равна...

Если это так, вы можете добавить свойство letter-spacing в класс ellipsis

здесь пример http://jsfiddle.net/c2o3pd2a/

Ответ 10

попробуйте следующий стиль

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

сообщите мне, если это полезно

Ответ 11

Вы можете добавить margin-right: -5px в свой класс elipsis

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

См. раздел Fiddle