html限制密码字数,列表限制文字长度，隐藏部分用…替代

很多cms网站首页都有文章列表分类，几乎cms首页列表分类中的文章标题都会对字数有一个限制，为了排版整齐，这是必须的

不限制的效果图

限制的效果图

关键代码

white-space: nowrap;设置文字不换行

overflow: hidden;设置超出父元素隐藏溢出

text-overflow: ellipsis;隐藏部分用…替代

实现演练

首先你得给父元素设置一个宽度(这个是关键点)

实现HTML代码

• wordpress begin主题实现关注微信公众号获取文章内隐藏内容密码
• wordpress begin主题实现关注微信公众号获取文章内隐藏内容密码
• wordpress begin主题实现关注微信公众号获取文章内隐藏内容密码
• wordpress begin主题实现关注微信公众号获取文章内隐藏内容密码
• wordpress begin主题实现关注微信公众号获取文章内隐藏内容密码
• wordpress begin主题实现关注微信公众号获取文章内隐藏内容密码

实现Css代码

*{

margin: 0;

padding: 0;

}

.ul{

width: 300px;

height:auto;

border: 1px #ccc solid;

margin: 0 auto;

margin-top: 100px;

}

.ul ul{

list-style: none;

}

.ul ul li{

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

padding: 6px;

}

注意

不同浏览器都会自带样式，在Css加载中，我们要初始化一下浏览器，在Css顶部加入以下代码

*{

margin: 0;

padding: 0;

}