前端知识沉淀--标签篇

最新推荐文章于 2025-02-13 20:42:56 发布

原创最新推荐文章于 2025-02-13 20:42:56 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨了前端开发中常见的标签处理难题，包括div、span、input、textarea等元素的样式定制与功能优化，如自动换行、内容省略、清除默认样式及设置输入限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端知识沉淀--标签篇

概述
- 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;
}
如果不生效，可能是因为autoprefixer清理老式的代码，则使用以下代码：
span {
	display: -webkit-box;
	/* autoprefixer: off */
	-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;
}