decode是针对性文本中存在的字符实体,input不是行

代码Github地址

html 空格-有趣的试验,html空格试验

首先,先给大家看一组demo

1 <input />
2 <input type="submit" />

展示效果:

为什么会出现空格呢?input不是行内元素吗?改变一下代码再看看效果

<input /><input type="submit" />

如果2个input之间没有间隙的话,下面的空格就消失了

再试验一组行内元素:

1 行内元素
2 行内元素
3 行内元素
4 行内元素
5 行内元素

展示效果如下:

为了使这些行内元素之间的间距消失,我们手动删除行内元素之间产生的额外空隙,代码如下

1 行内元素行内元素行内元素行内元素行内元素

效果图如下:

使用这种方法确实可以去掉行内元素之间的间距,但是代码堆成了一片,看得起很不舒服,那还可以怎么解决?

一.使用font-size:0

原理:行内元素的间距是由于换行符、tab(制表符)、空格等字符引起,而字符的大小是定义字体大小来控制,所以去除间隔可以从改变字体的大小入手。即设置当前行内元素的父元素的 font-size: 0;

1 <div>
2     行内元素
3     行内元素
4     行内元素
5     行内元素
6     行内元素
7 </div>

1 div{
2     font-size: 0px;
3 }
4 span{
5     font-size: 14px;
6 }

效果图如下: 嘿嘿,行内元素之间的间距不见了

这个方法,基本上可以解决大部分浏览器下inline,inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:

1 div{
2     font-size: 0;
3     -webkit-text-size-adjust:none;  /* 使用webkit的私有属性,让字体大小不受设备终端的调整,可定义字体大小小于12px */
4   *word-spacing:-1px;             /* 使用word-spacing 修复 IE6、7中始终存在的 1px 空隙,减少单词间的空白(即字间隔) */
5 }

 

通常情况下,我们可能会想要通过下面的代码实现一些效果

1 <p>行内        元素</p>
2 <p>行内 元素</p>

但是效果图确实下面这样子,这是因为,默认情况,浏览器在解析 html 时,H**TML 源码中的空白符均被显示为空格,并且连续的多个空白符会被视为一个。**

HTML 中的“空白符”包括:空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。

这并不能难倒我们,使用空格的替代符号

1 <p>行内&nbsp;&nbsp;&nbsp;元素</p>
2 <p>行内 元素</p>

效果图:

名称 编号 描述
&nbsp; &#160; 不断行的空白(1个字符宽度)
&ensp; &#94; 半个空白(1个字符宽度)
&emsp; &#8195; 一个空白(2个字符宽度)
&thinsp; &#8201; 窄空白(小于1个字符宽度)

  • 使用方法:可以用名称或编号作为空格的替代符号,名称必须小写,末尾的“;”不能省略。通常情况下我们都是使用  (也就是按下space键产生的空格。)

 

1.white-space

但是,如果我们想实现下面这个效果?有一定的缩进?是否要使用margin,padding?之类的属性?

1 <div style="white-space:pre">
2     function sum(x,y){
3         var sum = x + y;
4         return sum;
5     }
6 </div>

当white-space属性取值为pre时,浏览器会保留文本中的空格和换行,这样你就可以直接在文本中使用空格和回车了。

 

2.letter-spacing 

设置文本中字符之间的间隔,它的取值可以是一个带单位的长度值,浏览器会在字和字之间设置指定长度的空白。

1 <div style="letter-spacing:20px">欢迎光临!</div>

 

3.word-spacing 

设置文本中单词之间的间隔,它的取值可以是一个带单位的长度值

1 <div style="word-spacing:20px">Happy new year!</div>

 

4.text-indent 

有时候,文章每个段落需要缩进,实现那么的效果?

图片 1

使用text-indent 设置首行缩进,它的取值可以是一个带单位的长度值,

1 <div style="text-indent:2px">欢迎光临!</div> 

 

空格-有趣的试验,html空格试验 首先,先给大家看一组demo 1 input / 2 input type ="submit" / 展示效果: 为什么会出现空格呢?input不是行内元...

一. 属性说明

属性名 类型 默认值 说明
selectable Boolean false 是否支持文本的选中功能
space String false 显示连续空格。
decode Boolean false 是否解码 decode可以解析的有&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;
  1. space 设置space的不同值,可以让文本中的空格显示不同的间距。 这三个也叫不换号空格。 意思是前后字符和这个空格符号作为一个整体。不会中间换行。
    • ensp-> 中文字符空格一半大小。
    • emsp-> 中文字符空格大小.
    • nbsp-> 根据字体设置的空格大小
  2. decode 可以解析字符实体。
显示结果 描述 实体名称
空格 根据字体设置的空格大小 &nbsp;
空格 中文字符空格大小 &emsp;
空格 中文字符空格一半大小 &ensp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
  1. text 支持 n 换行
  2. 应用 首段缩进两个字的间距
// 一定要开启是否解码. 文本前面加上 `&emsp;&emsp;`<text decode="{{true}}">&emsp;&emsp;首行空两格n第二行</text>
注意:space是针对文本中的空格符号。decode是针对文本中存在的字符实体。

二. 代码

  • wxml
<view > <text selectable="{{false}}" space="ensp">中文 字符空格一半大小</text> <text space="emsp">中文 字符空格大小</text> <text space="nbsp">根据 字体设置的空格大小</text></view><text decode="{{true}}">&emsp;&emsp;首行空两格n第二行</text>
  • wxss
.container { display: flex; flex-direction: column;}.text { font-size: 50rpx;}

本文由2138acom太阳集团app发布于关于计算机,转载请注明出处:decode是针对性文本中存在的字符实体,input不是行

相关阅读