CSS设置列表内容超出自动用省略号代替

前端页面经常用到的一个类似于新闻列表用列表实现，但是有时候标题太长我们需要显示一部分超出的部分用省略号表示。
首先创建一个列表
HTML代码

<div class="inform">
        <div class="title">
            <p>通知公告</p>
            <span><a herf="#">更多>></a></span>
        </div>
        <div class="text">
            <ul class="ul2">
                <li>
                    <a href="#">关于做好我校2019年上半年全国大学英语四、六级和全国高校英语应用能力AB级、计算机水平考试报名工作的通知
                    <span>2019-3-30</span></a>
                </li>
                <li>
                    <a href="#">温馨提示：请修改一卡通密码和门户登录密码
                    <span>2019-3-31</span></a>
                </li>
                <li>
                    <a href="#">关于普法考试的通知
                    <span>2019-3-31</span></a>
                </li>
                <li>
                    <a href="#">关于组织我校学生参加第十五届“挑战杯”广东大学生
                    <span>2019-3-31</span></a>
                </li>
                <li>
                    <a href="#">关于开展2019年广东大学生科技创新培育专项资金项目
                    <span>2019-3-31</span></a>
                </li>
                <li>
                    <a href="#">关于举办学校第十五届田径运动会的通知
                    <span>2019-3-31</span></a>
                </li>
                <li>
                    <a href="#">关于《形势与政策》教学安排的通知
                    <span>2019-3-31</span></a>
                </li>
                <li>
                    <a href="#">2017-2018学年“国家励志奖学金”候选学生名单公示
                    <span>2019-3-31</span></a>
                </li>
            </ul>
        </div>
    </div>

CSS样式

*{
	margin: 0;
	padding: 0;
}
.inform {
 	width: 580px;
 	height: 235px;
 	margin-top: 10px;
 }
.title {
 	border-bottom: 1px solid;
 }
.title p {
 	display: inline-block;
 	text-align: center;
 	width: 98px;
 	height: 30px;
 	line-height: 30px;
 	background-color: #2477b2;
 	color: #fff;
}
.title span {
 	float: right;
 	font-size: 14px;
 	line-height: 31px;
}
.text ul{
 	list-style: circle;
 	margin-left: 20px;
 	margin-top: 12px;
 	line-height: 24px;
 	color: #000;
}
.ul2{
	width: 400px;
}
.text a:link,a:visited {
 	color: #000;
 	text-decoration: none;
}
.text a:hover,a:active {
 	color: #2477b2;
 	text-decoration: underline;
}
.inform ul span{
 	float: right;
 	font-size: 14px;
}

效果图

在这里设置了基本样式之后发现当标题太长的时候样式不是我们理想的样式，如果标题长于设定宽度的时候应该将后面的内容用省略号表示让页面整齐。

直接给ul添加css样式设置是否可以呢？
text-overflow属性规定当文本溢出包含元素时发生的事情
省略号的css代码为：text-overflow: ellipsis
!!!注意，这行代码经常不起作用，是因为其必须满足两个条件：1、宽度必须设置；2、同时设置white-space: nowrap(不换行); 和overflow: hidden（超出部分隐藏）
CSS样式

.ul2{
	width: 400px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	display:inline-block;
}

效果图

显然这个结果不是想要的，虽然超出宽度部分被隐藏了但是列表前面的小圆圈不见了，而且右边的日期也被挤下来了。
解决方法：
文字部分用<p>标签包裹起来，给p标签设置样式
CSS样式

.ul2 p{
	width: 400px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	display:inline-block;
}

效果图

这样子就能实现我们想要的样式布局啦~

总结：
列表溢出部分隐藏的时候把文字部分包裹在一个<span>标签或者<p>标签中，给标签设置样式，而不要直接给<ul>或者<li>设置样式
溢出部分用省略号的CSS样式

width: 400px;
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
display:inline-block;     //行内元素不可以设置宽度，增加这个属性使行内元素可以设置宽度