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

概述我想用省略号类删除右侧的额外空间. .ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px;}div{ float:left;}.clear {clear:both} <div class="ellipsis">hsdhh 我想用省略号类删除右侧的额外空间.

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

<div >hsdhhgasdhgasdgj</div><div>asdasd</div><div ></div><div >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 >hsdhhgasdhgasdgj</div><div>asdasd</div><div ></div><div >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 >hsdhhgasdhgasdgj</div><div>asdasd</div><div ></div><div >asdasdasd</div><div>asdadsas</div><!-- using text-overflow: clip '...'; --><div >hsdhhgasdhgasdgj</div><div>asdasd</div><div ></div><div >asdasdasd</div><div>asdadsas</div><!-- prevIoUs for Chrome--><div >hsdhhgasdhgasdgj</div><div>asdasd</div><div ></div><div >asdasdasd</div><div>asdadsas</div>

总结

以上是内存溢出为你收集整理的html – 如何使用省略号删除右侧的额外空间全部内容，希望文章能够帮你解决html – 如何使用省略号删除右侧的额外空间所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。