在網(wǎng)站制作中，span標(biāo)簽應(yīng)該是用得非常多的了。

那么HTML中的span標(biāo)簽究竟有什么用途呢？

它其實就是用來組合文檔中的行內(nèi)元素，也就是將內(nèi)容放在span標(biāo)簽之中。

span標(biāo)簽居中

<span style="width:500px; display:inline-block; text-align:center;">中國國旅</span>

居中我們使用“text-align:center”，但是一定要結(jié)合display來使用才行，可以是block，也可以是inline-block。

而且如果不設(shè)置dislpay，就算給span設(shè)置了width也不會有效果。

span標(biāo)簽隱藏

<span style="display:none;">css教程</span>

如果要將span標(biāo)簽隱藏，給其加上display:none即可。

span標(biāo)簽間距

如果是設(shè)置span內(nèi)容的行間距，直接使用line-height即可，如下實例：

<span style="line-height:26px;">
css教程<br />
php教程<br />
html教程
</span>

如果是設(shè)置多個span標(biāo)簽相互間的間距，則結(jié)合margin與display使用，如下實例：

<span style="display:block;">css教程</span>
<span style="margin-top:10px; display:block;">php教程</span>
<span style="margin-top:10px; display:block;">html教程</span>

span標(biāo)簽自動換行

方法1

<span style="width:300px;display:block;word-break:normal;white-space:pre-wrap;">span標(biāo)記有一個重要而實用的特性,即它什么事也不會做,它的唯一目的就是圍繞你的HTML代碼中的其它元素,這樣你就可以為它們指定樣式了。</span>

方法2

<span style="width:300px;display:block;word-break: break-all; word-wrap: break-word;margin-top:20px;">span標(biāo)簽是被用來組合文檔中的行內(nèi)元素。span沒有固定的格式表現(xiàn)。當(dāng)對它應(yīng)用樣式時，它會產(chǎn)生視覺上的變化。</span>

最后說說今天在網(wǎng)上看到的一個問題，有人問“span標(biāo)簽有value屬性嗎？”

答案是正常情況下沒有，但可以用其他方法實現(xiàn)。

<span class="spanbox">這是一個span標(biāo)簽元素</span>

以jquery為例，我們獲取span標(biāo)簽的內(nèi)容，是使用html()來實現(xiàn)。

<script>
alert($(".spanbox").html());
</script>

但是如果你非要讓span有value屬性，也可以，自定義一個value屬性。

<span class="spanbox" value="aaaaa">這是一個span標(biāo)簽元素</span>
<script>
alert($(".spanbox").attr("value"));
</script>

在jquery中用attr來獲取span標(biāo)簽value就行。

本文網(wǎng)址：http://www.santii.com/article/121.html

總結(jié)

以上是生活随笔為你收集整理的HTML中span标签使用详解含多种实例（转）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。