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

我想用省略号类删除右侧的额外空间.

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

解决方法

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

use text-overflow：ellipsis’…’;
或文本溢出：剪辑’…’;

对于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>

原文地址：https://www.jb51.cc/html/230307.html