概述

本文主要介绍了实际项目中可能遇到的标签处理问题

div

• 可编辑

<div contenteidtable="true"></div>

a

- 清空默认样式
a {
	text-decoration: none; // 去除a标签默认下划线
}
a:hover, a:active, a:link, a:visited {
	color: #ddd; // 修改a标签默认颜色
}

span

• 自动换行：当内容为非中文时，标签无法自动换行，使用下面当方法：

span {
	word-break: break-all; // 当文字超出span标签长度时，自动换行，适用于所有其他标签
}

• 超出一行省略

span {
	overflow: hidden;  // 超出不显示
	text-overflow: ellipsis; // 超出省略
	white-space: nowrap; // 单行显示
}

• 超出n行省略

span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; // 3代表3行
	overflow: hidden;
}

input

• 清除默认样式

input {
	outline: none; // 清除focus默认样式
	padding: 0; // 清除默认当2pxpadding，1pxborder
	border: 0;
}

• 设置最大长度

 <input type="text" maxlength="50">

textarea

• 清除默认样式，同input
• 设置最大长度，同input
• 禁止拉伸

textarea {
	resize: none;
}