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

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

给TA买糖
共{{data.count}}人
人已赞赏
HTML+CSS

js实现关闭网页出现是否离开提示

2019-5-13 9:19:28

HTML+CSS

Css3属性选择器

2019-9-22 13:45:46

4 条回复 A文章作者 M管理员
  1. 非技术的路过。

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

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

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

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