HTML span標籤如何做到自動換行？HTML span標籤的用法介紹

本篇文章主要的為大家講述的是HTML span標籤是怎麼做到自動換行的，介紹了span的七個屬性的使用和介紹。接下來我們一起來看這篇文章吧

首先我們介紹的肯定是如何做到讓span標籤自動換行的，我們先看一下這個例子：

<span style="width:80%;word-break:normal;display:block;white-space:pre-wrap;overflow:hidden;color:#0066CC;">这是随便可以
输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以
输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；</span>

HTML span標籤的例子解釋：

white-space ：通過HTML文檔的原始碼的排版方式控制頁面顯示文本的排版方式

取值: normal | pre | nowrap | pre-wrap | pre-line | inherit

• normal : 正常無變化(預設處理方式.文本自動處理換行.假如抵達容器邊界內容會轉到下一行)

• pre : 保持HTML原始碼的空格與換行,等同與pre標籤

• nowrap : 強制文本在一行,除非遇到br換列標籤

• pre-wrap : 同pre屬性,但是遇到超出容器範圍的時候會自動換行

• pre-line : 同pre屬性,但是遇到連續空格會被看作一個空格

看看上面代碼在瀏覽器中的顯示：

，顯示的文本只佔據了頁面的80%，用這個設定自動換行感覺還是可以的。

再來看個關於HTML span標籤的例子：

<p>
<span>这只是普通文本</span>
这也是普通文本</p>

HTML span標籤的例子解釋：
如果不對span應用樣式，那麼span元素中的文本與其他文本不會任何視覺上的差異。儘管如此，上例中的span元素仍然為p元素增加了額外的結構。

可以為span應用id或class屬性，這樣既可以增加適當的語義，又便於對span應用樣式。

可以對同一個<span>元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解為某一類元素），而 id 用於標識單獨的唯一的元素。

提示：事實上，您也許已經注意到了，比如“提示”使用了粗體的橘紅色。儘管實現這種效果的方法非常多，但是我們的做法是：使用“提示”使用span元素，然後對這個span元素的父元素，即p元素應用class，這樣就可以對這個類的子項目span應用相應的樣式了。

HTML:

<p class="tip"><span>提示：</span>這裡是PHP文本</p>

CSS:

p.tip span {font-weight:bold;color:#ff9955;}

很簡單：

Alibaba Cloud Hot Products
Elastic Compute Service (ECS)	Dedicated Host (DDH)	ApsaraDB RDS for MySQL (RDS)	ApsaraDB for PolarDB(PolarDB)	AnalyticDB for PostgreSQL (ADB for PG)
AnalyticDB for MySQL(ADB for MySQL)	Data Transmission Service (DTS)	Server Load Balancer (SLB)	Global Accelerator (GA)	Cloud Enterprise Network (CEN)
Object Storage Service (OSS)	Content Delivery Network (CDN)	Short Message Service (SMS)	Container Service for Kubernetes (ACK)	Data Lake Analytics (DLA)
ApsaraDB for Redis (Redis)	ApsaraDB for MongoDB (MongoDB)	NAT Gateway	VPN Gateway	Cloud Firewall
Anti-DDoS	Web Application Firewall (WAF)	Log Service	DataWorks	MaxCompute
Elastic MapReduce (EMR)	Elasticsearch