我想用省略号类删除右侧的额外空间.
.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>
