列表限制文字长度，隐藏部分用…替代 –

很多cms网站首页都有文章列表分类，几乎cms首页列表分类中的文章标题都会对字数有一个限制，为了排版整齐，这是必须的 不限制的效果图 限制的效果图 关键代码 white-space: nowrap;设…

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

不限制的效果图

限制的效果图

关键代码

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

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

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

实现演练

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

实现HTML代码

<div class="ul">		<ul>			<li>wordpress begin主题实现关注微信公众号获取文章内隐藏内容密码</li>			<li>wordpress begin主题实现关注微信公众号获取文章内隐藏内容密码</li>			<li>wordpress begin主题实现关注微信公众号获取文章内隐藏内容密码</li>			<li>wordpress begin主题实现关注微信公众号获取文章内隐藏内容密码</li>			<li>wordpress begin主题实现关注微信公众号获取文章内隐藏内容密码</li>			<li>wordpress begin主题实现关注微信公众号获取文章内隐藏内容密码</li>		</ul>	</div>

实现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;		}