学习《css世界》笔记之使用overflow做文字溢出点点点效果

效果图

HTML

		<p class="p1">qwertyuiopasdfghjklzxcvbnm</p>
		<div class="d1">
			<p>　冯塘村过去经济较为落后。几年前，镇里以400多年的冯塘古村为基础，引来社会资金投资休闲农庄和共享民宿，把这里建设成了一个集生态农业、创意农业、旅游观光、休闲体验、果蔬采摘、农产品生产加工等为一体的乡村生态旅游区。</p>
		</div>

CSS

		.p1{
				width: 200px;
				text-overflow: ellipsis;
				white-space: normal;
				overflow: hidden;
			}
			.d1{
				width: 200px;
				border: 1px solid #FF0000;
			}
			.d1 p{
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
			}

ps：在p标签中使用全英文如

<p class="p1">qwertyuiopasdfghjklzxcvbnm</p>

是不会自动换行的，需要修改p标签的换行规制，

p{
  word-wrap:break-word;
// 或者 word-break: break-all;
}

释义：
1.white-space：设置如何处理元素间的空白，默认为normal，表示空白会被浏览器忽略，white-space: nowrap;表示不换行。
2.word-break：规定自动换行的处理方法。normal:使用浏览器默认换行规则，break-all：允许在单词内换行，keep-all：只能在半角空格或连字符处换行。
3.word-wrap：允许长单词或URL地址换行到下一行。normal：只在允许的断字点换行（浏览器保持默认处理），break-word：在长单词或URL地址内部进行换行。
若两个属性同时存在，以word-break: break-all;为准。

建议使用p标签测试时，使用中文