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

久伴 2019年5月30日13:13:17 4 229

很多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;
		}
久伴

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  3   博主  1

    • avatar repostone 1

      非技术的路过。

      • avatar 弥雅 4

        弥雅只是来遛哒而已,久伴,儿童节快乐!

        • avatar 晴和君 1

          这个应该不限制于列表,都可以用。

            • 久伴 久伴 Admin

              @晴和君 是的,只是列表用的居多