關於span標籤內文字自動換行

2021-07-29 22:03:26 字數 663 閱讀 3969

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;

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.

行內文字標籤

如果不對 span 應用樣式,那麼 span 元素中的文字與其他文字不會任何視覺上的差異。儘管如此,上例中的 span 元素仍然為 p 元素增加了額外的結構。可以為 span 應用 id 或 class 屬性,這樣既可以增加適當的語義,又便於對 span 應用樣式。可以對同乙個 元素應用 class...

span標籤中實現換行

設定span標籤的css樣式 spanwhite space 通過html文件的源 的排版方式控制頁面顯示文字的排版方式 取值 normal pre nowrap pre wrap pre line inherit normal 正常無變化 預設處理方式.文字自動處理換行.假如抵達容器邊界內容會轉到...

span標籤中實現換行

spanwhite space 通過html文件的源 的排版方式控制頁面顯示文字的排版方式 取值 normal pre nowrap pre wrap pre line inherit normal 正常無變化 預設處理方式.文字自動處理換行.假如抵達容器邊界內容會轉到下一行 pre 保持html源...