实现文字过长时的省略号(css)

本博只是记录一下自己学习过程中遇到的问题

css

给文本设个宽度

隐藏文字溢出部分

为溢出的文本加省略号

取消自动换行

具体html代码

<div class="content1_2B ">
						<div class="content1_2Bright ">
							<ul>
								<li>
									<a href="# ">AAAAAAAAAAAAAAAAAAA</a>          <span class="date ">2017/06</span></li><br />
								<li>
									<a href="# ">BBBBBBBBBBBBBBBBBBB</a>          <span class="date ">2017/06</span></li><br />
								<li>
									<a href="# ">CCCCCCCCCCCCCCCCCCC</a>          <span class="date ">2017/06</span></li><br />
								<li>
									<a href="#  ">DDDDDDDDDDDDDDDDDDD</a>          <span class="date ">2017/06</span></li><br />
								<li>
									<a href="# ">EEEEEEEEEEEEEEEEEEE</a>          <span class="date ">2017/07</span></li><br />
							</ul>
						</div>
					</div>

具体css代码

.content1_2Bright a {
	float: left;
	width: 217px;
	overflow: hidden;/*隐藏文字溢出部分*/
	text-overflow: ellipsis;/*为省略部分添加省略号*/
	white-space: nowrap;/*取消自动换行*/
}


猜你喜欢

转载自blog.csdn.net/zwjCC/article/details/80735444
今日推荐