文章目录

HTML span标签使用详解含多种实例

在网站制作中,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


数据更新时间:2018-11-16