不使用pre如何实现html自动换行?

2021-01-18 23:29:06 -0500

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

今天 07:16 HTML前端开发CSSJavaScript 删除问题 分享
1个回答
已采纳图材图色tusea 科技发烧友
今天 09:08 · 图材图色,就上tusea.com
关注
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时的情况:

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

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。
本回答由提问者推荐
追问 1 评论 分享 举报
相似问题
问: HTML代码有PRE代码不能自动换行
答: 文章内容 其中width=120% 根据字体大小设置会不同,自己适当改变 问:
如何使html实现强行自动换行
答: 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行。 1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap:
break-word ;或者word-break:break-all;实现强制断行 效果:可以实现换行
2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条 效果:容器正常,内容隐藏 对于table

  1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏 abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss 效果:隐藏多余内容
    2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行 效果:可以换行
    1. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法
      4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用 效果:隐藏多余内容
      5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法 运行代码框 最后,这种现象出现的几率很小,但是不能排除网友的恶搞。
      问: html/css
      标签内容自动换行
      答: word-break:break-all;
      问: html网页自动换行的问题
      答: 把.txt文档装截进一个表单里,可能是一种思路
      问: 关于html pre便签换行问题!
      答:   pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。   标签的一个常见应用就是用来表示计算机的源代码。
         可以导致段落断开的标签(例如标题、 和 标签)绝不能包含在 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。 
        pre 元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签(比如 标签)放到 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。
      更多类似问题 >
«Newer      Older»

Back to home

Subscribe | Register | Login | N