新闻小标，省略文字

最新推荐文章于 2024-08-16 11:28:54 发布

christalfuller

最新推荐文章于 2024-08-16 11:28:54 发布

阅读量253

点赞数 1

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/christalfuller/article/details/79012993

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天看到一个同事做项目时，新闻列表是后台截去返回的，太好玩儿了，这个是一个css3的一个小小的属性就可以的实现的效果，却用后台截取，啊哈哈哈哈，开始正题咯！
1.利用css3的小属性

white-space: nowrap;//文字显示在一行
overflow: hidden;
text-overflow: ellipsis;//隐藏文字，ellipsis是将隐藏的文字转化为...

2.小例子
这里写图片描述
3.例子源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新闻列表</title>
</head>
<body>
    <h1>新闻列表</h1>
    <ul>
        <li><span>1.</span>本报北京1月8日电（记者闫晶晶）近日，最高人民检察院、国土资源部联合发布《关于加强协作推进行政公益诉讼促进法治国土建设的意见》（以下简称《意见》），贯彻落实中央关于检察公益诉讼改革部署，进一步完善检察机关提起公益诉讼制度，促进法治国土建设。</li>
        <li><span>2.</span>1月6日，四川省绵阳市检察院未检团队为东辰国际学校的孩子们带去了一堂生动有趣的法治课，进一步提高了孩子们的法治意识和自我保护意识。图为课后，孩子们追着授课检察官留言签名</li>
        <li><span>3.</span>据新华社北京1月8日电　由全国政协办公厅主办的第二十二届全国政协好新闻评选结果于近日揭晓，来自中央新闻媒体和地方新闻媒体的78件作品获奖。检察日报通讯《喜看新常态下协商民主</li>
        <li><span>4.</span>本报讯（记者卢志坚）1月5日，江苏省人大常委会常务副主任、党组副书记史和平，副主任、党组副书记公丕祥率部分省人大常委会委员，到江苏省检察院视察调研。</li>
        <li><span>5.</span>1月8日，全国“扫黄打非”办公室公布2017年度“扫黄打非”十大案件，其中三件都是网络直播平台传播淫秽物品牟利案。这说明网络直播现在已然成为传播淫秽色情的重灾区。</li>
    </ul>
</body>
</html>
<style>
    ul{
        margin:20px auto;
    }
    li{
        width:600px;
        margin:10px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    li span{
        font-size:18px;
        font-weight:bold;
        margin-right:10px;
    }
</style>

christalfuller

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新闻小标，省略文字

今天看到一个同事做项目时，新闻列表是后台截去返回的，太好玩儿了，这个是一个css3的一个小小的属性就可以的实现的效果，却用后台截取，啊哈哈哈哈，开始正题咯！ 1.利用css3的小属性white-space: nowrap;//文字显示在一行overflow: hidden;text-overflow: ellipsis;//隐藏文字，ellipsis是将隐藏的文字转化为...2.小例子
复制链接

扫一扫

专栏目录