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

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

加群入久伴博客官方微信群

加入久伴官方微信群有啥优势?

1.文章内部资源由于时间久远可能失效,加群,群内可以第一时间反馈

2.网站中教程不一定适用任何人,加群可以第一时间咨询并解决您得疑惑

3.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言

扫描下方二维码即可加入交流讨论

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA赞助
共{{data.count}}人
人已赞助
4 条回复 A文章作者 M管理员
  1. 这个应该不限制于列表,都可以用。

    • 是的,只是列表用的居多

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

  3. 非技术的路过。

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索