精华内容
下载资源
问答
  • 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将...normal ,当定义的宽度之后自动换行html:div id="wrap"正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义/d...

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,让人头疼,下面介绍的是如何实现换行的方法:

    对于div,p等块级元素

    正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的 white-space:normal ,当定义的宽度之后自动换行

    html:

    div id="wrap"正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义/div

    css:

    #wrap{white-space:normal; width:200px; }

    1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

    #wrap{word-break:break-all; width:200px;}

    或者

    #wrap{word-wrap:break-word; width:200px;}

    html:

    div id="wrap"

    abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

    /div

    效果:可以实现换行

    2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

    #wrap{word-break:break-all; width:200px; overflow:auto;}

    html:

    div id="wrap"

    abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

    /div

    效果:容器正常,内容隐藏

    对于table

    1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏

    table style="table-layout:fixed" width="200"

    tr

    tdabcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

    /td

    /tr

    /table

    效果:隐藏多余内容

    2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

    table width="200" style="table-layout:fixed;"

    tr

    td width="25%" style="word-break : break-all; "

    abcdefghigklmnopqrstuvwxy 1234567890

    /td

    td style="word-wrap : break-word ;"

    abcdefghigklmnopqrstuvwxyz 1234567890

    /td

    /tr

    /table

    效果:可以换行

    3. (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;无法起作用

    table style="table-layout:fixed" width="200"

    tr

    td width="25%" style="word-break : break-all; overflow:hidden; "

    abcdefghigklmnopqrstuvwxyz1234567890

    /td

    td width="75%" style="word-wrap : break-word; overflow:hidden; "

    abcdefghigklmnopqrstuvwxyz1234567890

    /td

    /tr

    /table

    以上便是小编为您带来的全部内容了,大家自己注意加上<>哦。

    展开全文
  • 关于换行以及换行属性对于CSS的white-space属性,我想大部分人应该和我差不多,最常用的就是nowrap属性,最多用来做超长省略号显示的时候会用到【hiahiahia~】起因是这样的:产品doggie策划了一个元旦活动,活动主页...

    关于换行以及换行属性

    对于CSS的white-space属性,我想大部分人应该和我差不多,最常用的就是nowrap属性,最多用来做超长省略号显示的时候会用到【hiahiahia~】

    起因是这样的:产品doggie策划了一个元旦活动,活动主页最下边需要显示配置的活动规则,注意,是配置的活动规则,所以,免不了运营小妹要在后台配置一个活动规则,肯定不指望她们能配置html文本的呀,对吧,于是她们配置的是这样的:

    1、封垫苏菲房间都是克拉夫;

    2、对方萨芬的刷分放大;

    3、粉打发打发打发

    这样色的,于是,取数据的时候,那隐藏的换行符免不了就被带走了~走了~了,它就变成了一个真正的,换行符。就像word文档里面看见的那样

    于是,页面呈现与DOM结构就变成了这样

    显然,这不是我们真实想要它呈现的效果,我们当然是想它能聪明的在该换行的时候换行呀,对吧,那么问题来了,为什么,它没有换行呢?

    换行符

    阿望脑袋里能记下来的换行符一共有4种

    \n:最初接触\n,是学C语言换行的时候,释义为:输入完一行内容后,光标转到下一行的起始位置

    \r\n:回车换行(回车:回车就是把水平位置复位,换行:换行就是往下一行,不改变水平位置,可以想象一下,在word文档中点击键盘回车键,其实执行的是回车+换行的操作)


    :这个换行符是HTML唯一能识别的换行标签

    ?:word文档软回车标记

    当然,除了这几种,不同的语言可能会有它们自己的换行符,比如C++的endl,VB的空格+下划线

    百度百科显示,word换行符是一种换行符号,它的作用是换行显示,但是它不是真正的段落标记,它的换行不是真正意义上的重起一段,因此被换行符分割的文字其实仍然还是一个段落中的,word中基于段落的所有操作都是不会识别换行符为段落结尾的,再加上在HTML中,只能识别br标签来做基本的文本换行,所以,这也就是文章开头说的,为什么word软回车换行符不能在HTML中正确回车显示了。

    HTML中的换行

    在HTML中,换行可以有以下几种办法

    块级元素包裹

    这个就不多做解释了,块级元素最基本的定义就是一般都从新行开始,相邻的块级元素将会在不同行显示,默认了它的换行行为

    br 标签

    br 是HTML中默认的、唯一的可识别的换行元素,在要换行的地方加进去就行,它是一个自闭合标签

    pre 标签

    来,解释一下上面才说了br 是HTML中默认的、唯一的可识别的换行元素,怎么突然有冒了个pre标签出来!

    pre 元素可定义预格式化的文本,被包围在 pre 元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体,所以,并不是因为它被识别成了换行元素才导致换行,而是因为,它保留了文本节点最原始的格式,你给我什么,我还你什么,而不是像其他的元素,你给我充满换行符合空格的文本,我给你被我压缩压缩再压缩的瘦身版文本

    友情提示:它不仅可以保留换行格式,还可以保留你的多个空格噢,因为pre元素默认带有样式 white-space: pre;

    举个栗子

    
     

    1、封垫苏菲房间都 是克拉夫;

    2、对方萨芬的刷分放大;

    3、粉打发打发打发

    // 显示

    1、封垫苏菲房间都 是克拉夫;

    2、对方萨芬的刷分放大;

    3、粉打发打发打发

    1、封垫苏菲房间都 是克拉夫;

    2、对方萨芬的刷分放大;

    3、粉打发打发打发

    // 显示

    1、封垫苏菲房间都 是克拉夫; 2、对方萨芬的刷分放大; 3、粉打发打发打发

    鉴于对pre标签的无知,在阿望还在做JSP的时候,遇到这种换行的需求通常都是正则表达式将换行符转换成br标签,然后通过HTML(vue的v-html)渲染成换行的DOM节点,相信也是大多数人的第一选择

    '我的字符串1\r\n\r\n\r\n\r\n我的字符串2\r\n111'.replace(/\r\n/g, '
    ')

    现在想来,当初那些前辈们教下来的也是这个办法,估计,他们也没想到,一行CSS代码就能解决吧。。。

    CSS属性换行

    我们假设有个超长的文本节点:"哈哈哈,congratulations",我们假设有个容器长度只能装得下"哈哈哈,con"

    word-break

    word-break 属性规定自动换行的处理方法,可以让浏览器实现在任意位置的换行,它是CSS3推出的新属性(有兼容性问题),用来标明怎么样进行单词内的断句

    什么叫单词内的断句呢?简单点来说,就是当文本节点"哈哈哈,congratulations"在容器中显示成了"哈哈哈,con[假设这里换了行]gratulations"的时候,就产生了单词内断句。浏览器默认的时候,"哈哈哈,congratulations"在容器中会显示成"哈哈哈,[假设这里换了行]congratulations",即:如果有一个单词很长,导致一行中剩下的空间已经放不下它时,则浏览器会把这个单词挪到下一行去

    word-break一共有三个属性值

    normal 浏览器默认的换行规则

    "哈哈哈,congratulations"在容器中会显示成"哈哈哈,[假设这里换了行]congratulations"

    break-all 允许在单词内换行(单词是指non-CJK (CJK 指中文/日文/韩文) 文本)

    "哈哈哈,congratulations"在容器中会显示成"哈哈哈,con[假设这里换了行]gratulations"

    keep-all 只能在半角空格或连字符处换行

    CJK 文本不断行, Non-CJK 文本表现同 normal

    word-wrap

    word-wrap 属性允许长单词或 URL 地址换行到下一行

    word-break一共有两个属性值

    normal 只在允许的断字点换行(浏览器保持默认处理)

    break-word 在长单词或 URL 地址内部进行换行

    那么它与word-break的区别是什么呢?

    首先看我们的前提条件:有个超长的文本节点:"哈哈哈,congratulations",我们假设有个容器长度只能装得下"哈哈哈,con",那么意味着,不添加word-break与word-wrap属性的时候,该文本节点在容器内显示为"哈哈哈,[假设这里换了行]congratulations",且单词congratulations肯定是冲出了容器边界的,超级难看。这个时候word-wrap就能派上用场了,给这段文字加上word-wrap: break-word之后,文本节点就会显示成"哈哈哈,[假设这里换了行]congratula[假设这里换了行]tions",这样,为了防止长单词溢出,就在它的内部断句了

    那既然有word-wrap,又为什么要有word-break属性呢?简单来说,当设置word-break:break-all; word-wrap:break-word,我们的超长文本"哈哈哈,congratulations"就会显示成"哈哈哈,con[假设这里换了行]gratulatio[假设这里换了行]ns",它的用处就是:节省空间!是的,你没有看错!

    word-wrap 是用来决定允不允许单词内断句的,如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行,看看下一行的宽度够不够,不够的话就进行单词内的断句

    word-break:break-all则更粗暴,直接进行单词内的断句

    white-space

    white-space 属性设置如何处理元素内的空白,这个属性声明建立布局过程中如何处理元素中的空白符,实际上会对列表溢出换行和文字溢出进行处理

    空白符

    空白符是指在屏幕不会显示出来的字符(如空格,制表符tab,回车换行等),HTML默认已经把所有空白符合并成一个空格

    white-space一共有五个属性值

    normal 默认,空白符会被浏览器忽略

    多个空格合并成1个空格,换行符被忽略,在容器宽度内自调整换行

    pre 空白会被浏览器保留,其行为方式类似 HTML 中的 pre 标签

    多个空格被保留,换行符被保留,不会在容器宽度内自调整换行,直到遇到 br 标签为止

    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止

    多个空格合并成1个空格,换行符被忽略,不会在容器宽度内自调整换行,这是它与默认行为不一样的地方

    pre-wrap 保留空白符序列,但是正常地进行换行

    多个空格被保留,换行符被保留,在容器宽度内自调整换行

    pre-line 合并空白符序列,但是保留换行符

    多个空格合并成1个空格,换行符被保留,在容器宽度内自调整换行

    inherit 规定应该从父元素继承 white-space 属性的值

    以上,可根据实际情况选择自己想要的属性值

    另:若换行处想添加连字符,将congratulations换行显示为con-gratulatio-ns的话,可使用属性hyphens:auto;在适当的位置自动插入连字符换行

    展开全文
  • 超文本标记语言或超文本链接标示语言(标准通用标记语言下的一个应用)HTML(HyperText Mark-up Language)是一种制作万维网...比如换行的,空格的用 可以保持原来的格式,大多数用在写代码的时候。对于div,p等块级元素 ...

    超文本标记语言或超文本链接标示语言(标准通用标记语言下的一个应用)HTML(HyperText Mark-up Language)是一种制作万维网页面的标准语言,是万维网浏览器使用的一种语言, 它消除了不同计算机之间信息交流的障碍。

    html那个段落标签保持原来格式

    不是P标签,哪个标签保持格式不变的啊????比如换行的,空格的

    fe7d289d55de2b9488ec82067d666d7d.png

    用 可以保持原来的格式,大多数用在写代码的时候。

    对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行。 1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 效果

    html5文字自动换行怎么设置

    1.你定死表格的宽度,即给表格一个宽度值(是数值,不是百分比) 2.强制不换行 div{ //white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 white-space:nowrap; } 自动换行 div{ word-wrap: break-

    展开全文
  • html换行标签<br>

    2021-03-28 11:20:38
    html换行标签<br>html换行标签<br>html换行标签<br> 换行符<br>还是可以的,用它对于排版就会方便很多,可以少写margin \padding <br> <br>

    h t m l 的 换 行 标 签 < b r > html的换行标签<br> html<br>

    换行符<br>还是可以的,用它对于排版就会方便很多,可以少写margin \padding

    <br>
    <br>
    
    展开全文
  • word-break:normal 使用浏览器默认的规则 适用IE5 safari chrome word-break:keep-all 只能在半角空格或连字符处理换行 适用IE5 word-break:break-all 允许在单词内换行适用IE5safari chrome 三、word-wrap属性...
  • html 换行符号

    千次阅读 2021-06-12 11:32:36
    手动换行符删除方法,缺失:html换行符号12244/11以下是的一些我们精选的Word中向下的箭头↓符号怎么删除?手动换行符删除方法有时我们需要从网页上复制一些文章到Word中,但奇怪的是往往会带有好多向下箭头的符号,...
  • 在用html写网页时,为了让网页中内容看起来整洁流畅,我们需要将其中的文字内容进行换行,那么,html怎么来换行呢?本篇文章就来给大家介绍一下html中给文字换行的方法。html换行的方法有很多,其中最为简单的就是...
  • 就是有时候web view不会自动换行,它会把连在一起的字母或者表情当作是一个单词,直接显示在后面,不自动换行就造成了在webView中显示不全的现象。IMG_1439.PNG刚开始一直在找通过webView的方法来设置来解决问题,...
  • 但在某些复杂的布局中也会遇到使用float属性是导致一行中的元素无法对齐或者float元素换行等现象。在遇到这种问题时,我们可以修改元素的位置来解决换行或者元素不对齐的现象。修改收货地址比如说,我在编写类似菜单...
  • HTML5 canvas 文本自动换行调用:var my_cvs = document.getElementById("my_cvs"); var ctx_2d = my_cvs.getContext("2d"); writeTextOnCanvas(ctx_2d,30,24,'文字内容文字内容文字内容文字内容',182,607);函数://...
  • html怎样让文字自动换行html中可以通过来实现换行,那怎么实现调整两行文字、文本框或方法很多,要做到网页生动,就的灵活应用。 据几个例子: 1) (空一行), 2) text here(上面空20pt,同样...html5文字自动换行怎么...
  • HTML自动换行的问题

    2021-06-09 02:50:42
    有时文本文字已经超过所在的区域,但是文字还是不自动换行可以用强制换行强制不换行div{ white-space:nowrap;}自动换行div{ word-wrap:break-word; word-break:normal;}强制英文单词断行div{ word-break:break-all;}...
  • html 什么代码可以不换行我不想换行 是计数器 为什么会自动换行 ,?怎么作可以不换行?我想让图片和下面的文字在同一行应该怎么做?请解答一下,强制不换行,同时以省略号结尾。 欢迎来到CSS布局HTML朋友朋友朋友我为...
  • 关于HTML中的 alert提示框内容换行显示 草率简单叙述一下,当然方法不止这一种 问题 这里我想让输出的内容换行对齐显示 我首先想到了html中的 br 换行 这是初始代码 <a href="javascript:;" onclick="alert('邮箱...
  • HTML列表框换行文本

    2021-06-12 06:21:52
    For example, HTML uses the tag as a paragraph container. In plaintext files, there are two common formats. Pre-formatted text will have a newline at the end of every physical line, and two newlines ...
  • 首先,打开html编辑器,新建html文件,例如:index.html,编写...}html语句问题,输入框文本换行问题html网页自动换行的问题请看清楚我的问题再作答。 我想在网页中直接打开.txt的文件,但网页显示文字自动换行;加...
  • html换行代码?

    2021-06-13 07:20:22
    强制不换行,都起作用 5.不换行,超出部分隐藏且以省略号形式出现 6.不换行,超出部分隐藏且以省略号形式出现 CSS代码: ...推荐答案HTML结构:1.只对英文起作用,以字母作为换行依据2.只对英文起作用,以单词作为...
  • 码云以及git使用码云的使用方法以及git的连用 创建公钥的方法 打开码云,点击个人资料---->SSH公钥---->...ast;HDU2510 DFS符号三角形 Time Limit: 2000/1000 MS (Java/Others)Memory Limit: 32768...
  • Html 段落自动换行

    2021-06-12 09:30:07
    [转载]JavaScript 中小数和大整数的精度丢失 标题: JavaScript 中小数和大整数的精度丢失作者: Demon链接: http://demon.tw/copy-paste/javascript-precision.html版权: 本博客的 ... tomcat和mysql安装配置总结 我...
  • 我想你想要做的就是把looooooooooooooooo的这个单词或者URL放在一起,这样他们就不会把表的大小推出来. (我一直在努力做同样的事情!)你可以用DIV轻松地做到这一点,给它一个风格的word-wrap:break-word(你也可能需要...
  • 4列后自动换行思路:inti=0;while(dr.Read()){if(i%4==0)输出一行的开始输出这个数据...}3列后自动换行思路:html 例子:@if (Model != null && Model.Count > 0){string html = string.Empty;for (var i...
  • html如何设置文字不换行

    千次阅读 2021-06-13 05:34:40
    html设置文字不换行的方法:1、一般的文字截断,代码为【word-...本教程操作环境:windows7系统、html5版,DELL G3电脑。html设置文字不换行的方法:一般的文字截断(适用于内联与块):.text-oneLine{display:block;...
  • 1、实现方式:html中title属性换行实现孟繁贵的博客园孟繁贵的博客园2、效果:3、原理在html中的回车和换行符为:— 换行Line feed— 回车Carriage Return所以:和 均可实现title属性换行html a 链接标签title属性...
  • 如何禁止html自动换行

    2021-06-09 05:36:12
    禁止html自动换行的方法:1、给html元素添加“display:inline”样式,将元素设置为行内元素;...HTML5版、Dell G3电脑。demo:性别:男女使两个input在同一行显示方法:1、使用样式display:inline.c{d...
  • html表格内容自动换行

    2021-06-09 01:11:27
    有时候表格会因为内容多少忽大忽小的很烦人,在网上...//字符串自动换行注意:IE和firefox是有很大区别的!(我就是栽在这个上面了,⊙﹏⊙b汗)1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏2...
  • html table实现不换行显示的方法:首先打开相应的HTML代码文件;...本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。html的table中不换行显示的效果table中,如果需要单元格中不...
  • html换行标签是什么?

    千次阅读 2021-06-13 06:06:16
    2016-08-12 12:41龚小艳 客户经理“标担锭曹瓜丨盖查睡肠精签”是什么?标签(tag)指示元素的起始与结束。所有标签都具有相同的格式:以小于号“”结尾。...HTML主要就是各种各样的元素,所以,学习HTML...
  • 那么输入空格,文字就可以格局空格往后移动换行到第二行显示。但是这种方法就可能会有一种情况发生,就是如果我控制了20个字符,我们中文和英文和数字暂用的字符的数量是不同的,空格这些符号也是暂用字符的,所以当...
  • 不管是替换成/r 是 html里面 都不会换行 回答 1./g为什么不起作用?我试了可以的啊。 2.换行不是应该\n? const text= '人的一生几乎不可能不##paragraph##经历某种失败。但是,失败##paragraph##的美妙之处在于' ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 202,473
精华内容 80,989
关键字:

html5换行