html关于不换行代码

最新推荐文章于 2024-09-14 16:44:43 发布

转载最新推荐文章于 2024-09-14 16:44:43 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/Liang-jc/p/9180972.html

标签

#移动开发

收录于

本文介绍了一种使用CSS实现的优雅文本截断方法，通过display:inline-block; white-space:nowrap; overflow:hidden; 和 text-overflow:ellipsis;等属性组合，可以在不换行的情况下对超出设定宽度的文字进行自动隐藏并附上省略号，适用于a标签而非table布局，为网页设计提供了简洁美观的解决方案。

类似这种效果这是基于a标签不是用table实现的

<a style="display: inline-block;white-space:nowrap;width: 100px;overflow:hidden;" href="">{{row.username}}</a>

以上就可以实现图片效果

display: inline-block 将行内标签属性赋予块级标签 块级标签属性赋予行内标签 

white-space:nowrap　　不换行
overflow:hidden 　　  表示超过行会自动隐藏超过部分
text-overflow:ellipsis; 超出行宽度时显示省略号 要和overflow:hidden一起使用

如果是table标签
只需定义table{ table-layout:fixed;}

<a style="display: inline-block;white-space:nowrap;width: 100px;word-break:keep-all;overflow:hidden;" href="/cmdb/userdetail-{{row.id}}">{{row.username}}</a>