不用pre这个属性如何解决html?自动换行问题

不用pre这个属性如何解决html?自动换行问题,第1张

white-space,控制空白字符的显示,同时还能控制是否自动换行。它有五个值:normal | nowrap | pre | pre-wrap | pre-line

word-break,控制单词如何被拆分换行。它有三个值:normal | break-all | keep-all

word-wrap(overflow-wrap)控制长度超过一行的单词是否被拆分换行,是word-break的补充,它有两个值:normal | break-word

white-space

先看下white-space:nowrap时的情况:

不仅空格被合并,换行符无效,连原本的自动换行都没了!只有</br>才能导致换行!所以这个值的表现还是挺简单的,我们可以理解为永不换行。

white-space:pre:

空格和换行符全都被保留了下来!不过自动换行还是没了。保留,所以pre其实是preserve的缩写,这样就好记了。

white-space:pre-wrap:

显然pre-wrap就是preserve+wrap,保留空格和换行符,且可以自动换行。

white-space:pre-line:

空格被合并了,但是换行符可以发挥作用,line应该是new line的意思,自动换行还在,所以pre-line其实是preserve+new line+wrap。

是<textarea>吗?

如果是在表单里输入换行,直接打回车就可以了。这个控件敲回车时是不会提交表单的。

如果要给一个带换行的默认值,这样做:

<textarea>haha

hehe</textarea>

如果是<input>,则不能输入换行。多行文本请使用<textarea>。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6114240.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表(0条)

保存