当前位置:Gxlcms > html代码 > 何为空白符?空白符对HTML结构影响

何为空白符?空白符对HTML结构影响

时间:2021-07-01 10:21:17 帮助过:22人阅读

何为空白符?

空白符: 空格、制表符、换行符

注意:浏览器在解析HTML时会把所有空白符合并成一个空格

空白符对HTML结构的影响

HTML5中<textarea>标签placeholder无法正确显示

不好的结构造成意外的结果:

标签换行了:

1 <!--文本域结束标签 换行导致placeholder无法正确表示-->2 <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框,输入您的个人描述">
</
textarea>

标签之间有空格:

1  <!--文本域标签之间有空格,导致placeholder无法正确表示-->2  <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框,输入您的个人描述">    </textarea>

结果:一片空白

原因:因为表单区域中包含了空白符(空格、制表符、换行符),textarea内的空白符被认为是内容,阻止了占位符文本的显示。

正确的操作:

1 <!--文本域开始标签与结束标签紧挨着,placeholder正确表示-->2 <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框,输入您的个人描述"></textarea>

结果:占位了!!!

inline-block的默认空白间距

默认情况下,inline-block元素之间大约有“4px”的间距(不同浏览器会有不同的大小)。

1 <ul>2   <li>item1</li>3   <li>item2</li>4   <li>item3</li>5   <li>item4</li>6   <li>item5</li>7 </ul>
 1 *{ 2   margin: 0; 3   padding: 0; 4 } 5 ul { 6   list-style: none outside none; 7   padding: 10px; 8   background: green; 9   text-align: center;10 }11 ul li {12   display: inline-block;13   *display: inline;14   zoom: 1;15   background: orange;16   padding: 5px;17 }

原因:标签之间的空白符造成的。

解决:此时可以通过改变HTML的结构,让上一个li的结束标签与下一个li开始相连,去除空白符。

1 <ul>2   <li>item1</li3   ><li>item2</li4   ><li>item3</li5   ><li>item4</li6   ><li>item5</li>7 </ul>

你可以点击这里狠狠尝试demo

当然,空白符也是字符,去除它们也可以通过CSS样式letter-spacing、word-spacing来设定。详情见:如何解决inline-block元素的空白间距

存在于文本中的空白符

如下面的换行符,和空格。

<div>They can stay 72-hours 
    within the Shandong      province after they have entered China via the Qingdao International Airport.</div>
结果:浏览器解析的时候只保留单词之间的空白符被合并为一个空格。
They can stay 72-hours within the Shandong province after they have entered China via the Qingdao International Airport.

可以通过CSS属性white-space对文本中的空白符进行处理

white-space:normal | pre | nowrap | pre-wrap | pre-line | inherit

normal: 合并空白符,允许自动换行
nowrap: 合并空白符,不允许自动换行
pre-line: 合并空白符(不包括换行符),允许自动换行
pre: 不合并空白符,不允许自动换行
pre-wrap: 不合并空白符,允许自动换行(在pre基础上,保留自动换行)

详情见:demo

充一点:CSS3新增了两个换行属性word-wrap和word-break。

以上就是何为空白符?空白符对HTML结构影响的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行