关于span标签内文字自动换行

white-space – 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式
取值: normal | pre | nowrap | pre-wrap | pre-line | inherit
normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)
pre: 保持HTML源代码的空格与换行,等同与pre标签
nowrap: 强制文本在一行,除非遇到br换行标签
pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行
pre-line: 同pre属性,但是遇到连续空格会被看作一个空格

例如想要换行设置:white-space: pre-wrap;

 <span id="help-block" style="color: red; white-space: pre-wrap;">
      Example help text here.
 </span>

在文本中添加“\n”就可以了, js 代码如下

var str = "Example " + "\n" + "help text here." ;

效果如下:

Example
help text here.

猜你喜欢

转载自blog.csdn.net/tszxlzc/article/details/68945174