使多出的字隐藏

为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字。这在列表条目,题目,名称等地方常用到。

代码如下:

.product-buyer-name{      //可以给定容器宽度限制,超出部分省略

max-width:110px;

overflow:hidden;

text-overflow:ellipsis;                           //clip :  不显示省略标记(...),而是简单的裁切
      
                                                           ellipsis :  当对象内文本溢出时显示省略标记(...)

white-space:nowrap;                       //规定段落中的文本不进行换行
}     //以上三条都不能少

还有一种方法

<a id="123"> fjdkshfldjshfjdshajkfldhsjakfhdslajkhfdjklsa</a>
<script>
    var tag = document.getElementById("123");
    var text=tag.innerHTML;
    if(text.length>15){
        text=text.substring(0,15)+"...";
    }
    tag.setAttribute("title",text);    // 利用title属性,使鼠标放在标签上时,显示缩进后的内容
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,169评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,084评论 19 139
  • 介绍一些好用的小工具——chrome插件篇。 Dragdis——设计师的灵感收藏 Dragdis 下载链接 灵感收...
    申子胥阅读 6,568评论 1 5
  • ――紫焲 举头明月挂晴空, 三晋大地春意浓。 转眼三十而当立, 恍如红尘一梦中。
    紫焲阅读 1,387评论 7 2

友情链接更多精彩内容