码迷,mamicode.com
首页 > Web开发 > 详细

css:文章标题过长时,使用省略号

时间:2018-05-29 01:48:19      阅读:314      评论:0      收藏:0      [点我收藏+]

标签:溢出   let   代码   效果   list   bullet   lan   silver   info   

html代码

<ul>
    <li><a href="" target="_blank">我是文章1,现在标题过长,使用css加省略号</a></li>
    <li><a href="" target="_blank">文章2</a></li>
    <li><a href="" target="_blank">文章3</a></li>
</ul>

css代码

ul{
    width: 160px;
    background: silver;
    /*列表样式位置改为内部,使image生效*/
    list-style-position: inside;
    list-style-image: url("../source/bullet.png");
}
li{
    /*不换行*/
    white-space: nowrap;
    /*溢出的话,隐藏*/
    overflow: hidden;
    /*文本溢出时,是否....*/
    text-overflow: ellipsis;
}

显示效果

技术分享图片

 

css:文章标题过长时,使用省略号

标签:溢出   let   代码   效果   list   bullet   lan   silver   info   

原文地址:https://www.cnblogs.com/xutaowang/p/9097789.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!