在網站制作中，span標簽應該是用得非常多的了。

那么HTML中的span標簽究竟有什么用途呢？

它其實就是用來組合文檔中的行內元素，也就是將內容放在span標簽之中。

span標簽居中

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

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

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

span標簽隱藏

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

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

span標簽間距

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

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

如果是設置多個span標簽相互間的間距，則結合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標簽自動換行

方法1

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

方法2

<span style="width:300px;display:block;word-break: break-all; word-wrap: break-word;margin-top:20px;">span標簽是被用來組合文檔中的行內元素。span沒有固定的格式表現。當對它應用樣式時，它會產生視覺上的變化。</span>

最后說說今天在網上看到的一個問題，有人問“span標簽有value屬性嗎？”

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

<span class="spanbox">這是一個span標簽元素</span>

以jquery為例，我們獲取span標簽的內容，是使用html()來實現。

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

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

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

在jquery中用attr來獲取span標簽value就行。

本文網址：http://www.santii.com/article/121.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。