前端知識沉澱--標籤篇

• 概述
• div
• a
• span
• input
• textarea

概述

本文主要介紹了實際專案中可能遇到的標籤處理問題

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;
}