首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用 white-space 来实现保留文本域 textarea的换行格式 空格格式

背景 昨天产品需求评审,产品经理收到用户的反馈,在系统中有一些文本域,用户希望在在文本中填写的文本内容格式都能够被保留下来,目前只能保存文本内容,对于文本域的换行空格,在显示的时候都没有正确显示。...接到这个需求,我搜索了一下,网上大多数是获取文本域的内容后,将其中的换行符,空格替换成html标签,如, 使用JavaScript处理,然后将这些数据转化后,保存的后端,在显示时,使用innerHTML...最终我发现设置元素样式的white-space可以将文本域的换行空格正确显示出来。...white-space 属性解释 下面是white-space的几个值其及其解释 属性 换行符 空格制表符 文字换行 行尾空格 normal 合并 合并 换行 删除 nowrap 合并 合并 不换行...break-spaces 与 pre-wrap的行为相同,除了: 任何保留的空白序列总是占用空间,包括在行尾。 每个保留空格字符后都存在换行机会,包括空格字符之间。

2.4K30

使用 white-space属性 来实现保留文本域 textarea的换行格式空格格式

背景 昨天产品需求评审,产品经理收到用户的反馈,在系统中有一些文本域,用户希望在在文本中填写的文本内容格式都能够被保留下来,目前只能保存文本内容,对于文本域的换行空格,在显示的时候都没有正确显示。...接到这个需求,我搜索了一下,网上大多数是获取文本域的内容后,将其中的换行符,空格替换成html标签,如, 使用JavaScript处理,然后将这些数据转化后,保存的后端,在显示时,使用innerHTML...最终我发现设置元素样式的white-space可以将文本域的换行空格正确显示出来。...white-space 属性解释 下面是white-space的几个值其及其解释 属性 换行符 空格制表符 文字换行 行尾空格 normal 合并 合并 换行 删除 nowrap 合并 合并 不换行...break-spaces 与 pre-wrap的行为相同,除了: 任何保留的空白序列总是占用空间,包括在行尾。 每个保留空格字符后都存在换行机会,包括空格字符之间。

5.1K196
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    md语法学习

    标题写法一:一级标签(# 一级标签)二级标签(## 二级标签)三级标签(### 三级标签)四级标签(#### 四级标签)五级标签(##### 五级标签)六级标签(###### 六级标签)注意#和文字之间要有空格写法二...:只能用于一级二级标签一级标签(文字下加===号)二级标签(文字下加---)2.下划线---(3个横线极其以上,但是要注意区别开二级标签的下划线)----***/---/___(3个符号极其以上)--...--3、列表有序列表123123123无序列表123 (* 123)123123123(+ 123)123123123(- 123)123123(* 123)注意使用不同的符号 之间会有间隙4、区块引用案例...对 齐 样 式居中对齐样式写法:左对齐|右对齐|居中:---|---:|----------左对齐|右对齐|居中左对齐样式|右 对 齐 样 式|居中对齐样式7、链接样式:百度写法: [百度](百度一下...3黑体红色字体 字体大小为3 微软雅黑写法:红色字体字体大小为3黑体</font

    42040

    全栈之前端 | 8.CSS3基础知识之文本样式学习

    font-size 属性 - 设置字体大小 描述: 此属性用于设置字体大小, 更改字体大小还会更新字体大小相关的 单位,例如 em、ex 等。...em 值创建动态或计算字体大小使用 rem 值为了避免复合问题。...文本换行 行末空格 行末的其他空白分隔符 normal 合并 合并 换行 移除 挂起 nowrap 合并 合并 不换行 移除 挂起 pre 保留 保留 不换行 保留 不换行 pre-wrap 保留 保留...换行 挂起 挂起 pre-line 保留 合并 换行 移除 挂起 break-spaces 保留 保留 换行 换行 换行 温馨提示:空格其他空白分隔符之间存在区别,如果空白字符被挂起,那么它可能会影响框的固有尺寸的测量结果...空格空格(U+0020)、制表符(U+0009)分段符(例如换行) 其他空白分隔符: Unicode 中定义的所有其他空格分隔符(已定义为空格的分隔符除外)。

    33320

    Python - 字符串格式化详解(%、format)

    {1} 当你指定了关键字 ,如果不指定 name=xxx ,则会报错 {name} 当你指定了关键字,又只写了 时,你传入带有关键字指定的值必须写在后面,类似函数(形参在前,实参在后) {} ...123 八进制14 十六进制d 包含知识点 指定了 ,则只能传字符串值,如果传其他类型值不会自动转换 :s 当你不指定类型时,你传任何类型都能成功,如无特殊必要,可以不用指定类型 如果要结合数字编号关键字使用可以如下...:{:10}'.format("123"), "end") print('左对齐,宽度为10,不足补空格:{:<10}'.format("123"), "end") print('右对齐,宽度为10...,不足补空格:{}{:>10}'.format("start", "123")) print('右对齐,宽度为10,取两位小数,不足补0:{:0>10.2f}'.format(22.22555)) 执行结果...默认左对齐,宽度为10,不足补空格: 123 end 左对齐,宽度为10,不足补空格:123 end 右对齐,宽度为10,不足补空格:start 123 右对齐

    27.8K41

    万字长文,史上最全Python字符串格式化讲解

    ,正数加正号,负数加负号; 2) -: 左对齐,正数无符号,负数加负号; 3) 空格: 右对齐(默认的对齐方式),正数前加空格,负数前加负号; 4) 0: 右对齐,以0填充,正数无符号...| # 负整数右对齐,负数加负号, 符号和数字之前填充0 (2.4) 正浮点数 # 如未指定浮点数精度,默认保留6位小数,其余均用空格填充(如指定0则用0填充);若width小于浮点数的数位则...>>> |2.200000 | # 正浮点数左对齐,小数点后为空格 print("|% 10f|" % 2.2) >>> | 2.200000| # 正浮点数右对齐,浮点数前为空格...| # 负浮点数加负号左对齐,小数点后为空格 print("|% 10f|" % -2.2) >>> | -2.200000| # 负浮点数加负号右对齐,其余用空格填充...对于浮点数复数, 在输出值保留小数点符号; c.

    4.6K20

    css教程之文本字体

    font-style:italic; } 5.字体颜色 color div{color:#f60;} 二、文本Text 1.white-space 指定元素是否保留文本间的空格...normal 默认处理方式 pre 原封不动的保留你输入时的状态 nowrap:强制所有文本在同一行内显示 2.word-break 定义元素内容文本的字间与字符间的换行行为 normal:...right:内容右对齐。...如果该盒没有基线,就将底部外边距的边界父级的基线对齐 sub:把当前盒的基线降低到合适的位置作为父级盒的下标(该值不影响该元素文本的字体大小) super:把当前盒的基线提升到合适的位置作为父级盒的上标...(该值不影响该元素文本的字体大小) text-top:把当前盒的top父级的内容区的top对齐 text-bottom:把当前盒的bottom父级的内容区的bottom对齐 middle:把当前盒的垂直中心父级盒的基线加上父级的半

    1.2K40

    Python字符串

    「阅读本文大概需要6分钟」 今天修改内容改了好久,因为字体大小每行内容过多的原因,导致出各种各样的Bug,为了呈现出最简单大方有质量的内容,前前后后改了好久,真心的感觉到原创写作的不易,所以在这里为每个坚持原创的公众号点波赞...# 字符串 s1 = "To be a better man" # 成员运算符,判断s1是否包含'be' print('be' in s1) # True # 身份运算符,判断ab是否相同 a...***** print(s1.center(40, "*")) # 左对齐 输出:To be a better man************ print(s1.ljust(30, "*")) # 右对齐...输出: To be a better man print(s1.rjust(30)) # 默认用0填充,右对齐 print(s1.zfill(30)) # 输出:000000000000To...*****" # 截掉字符串左侧指定字符,默认为空格 # To be a better man !

    70450

    python入门-2-55个案例吃透python字符串格式化

    [precision] typecode (name):参数的名称,可以省略;如果使用必须加上() flags:对齐标志位;可以是+、-、“”、0;+右对齐,-左对齐,""填充一个空格;0表示左侧使用0...,9 为显示宽度,3 为小数点位数,f 表示输出为浮点数类型 第二个 % 后面为显示的内容来源,输出结果默认为右对齐,2.300 长度为 5,故前面有4个空格 print("%+9.3f" % 2.3)...bin(age) # 通过bin函数查看 '0b11001' 输出的宽度、精度等设置 number = 1.23456789 # 宽度为10,保留小数点后4位,默认是右对齐 print("%10.4f...可以使用逗号或者其他符号,常用逗号: money = 1234567890 print(f'{money:,f}') # 输出保留6位小数 1,234,567,890.000000 print(f'...(-),正数前不加任何符号(默认) 空格:负数前加负号(-),正数前加一个空格 宽度精度 width:指定宽度为width width.precision:宽度为width,精度为precision

    27620

    Oracle 开发规范(一)

    \ 书写 1.1.1【强制】SQL 语句的所有表名、字段名全部大写,系统保留字、内置函数名、SQL 保留字也大写 举例: Demo Avoided Select subs_id, prefix, acc_nbr...VALUES(nSubsId, vPrefix, vAccNbr, ......) \ 空格 1.2.1【强制】=、=、等符号前后加上一个空格 \ 1.2.2 【强制】逗号之后必须接一个空格或换行...\ 1.2.3 【强制】关键字、保留左括号之间必须有一个空格或换行 举例: Demo SELECT A.SUBS_ID, A.PREFIX, A.ACC_NBR, B.PROD_STATE, C.SERV_TYPE...以保留字开始,保留右对齐, 对于连接符=、=之类的不换行 举例: Demo \ 1.4.3 【强制】同一语句中的SELECT、UPDATE、SET、INSERT、DELETE、FROM、WHERE...、ORDERBY、GROUP BY、HAVING等第一个关键字换行后右对齐;如果有关键字长度大于SELECT/DELETE/UPDATE,则采用左对齐 举例: Demo \ 1.4.4 【强制】IF

    657120

    - 字符串格式化

    ⭐️ 使用格式化的场景目的发送邮件的时候发送短信的时候APP推送新闻消息的时候对于重复性很多的信息,通过格式化的方式我们可以大大减少代码的书写量我们思考一下上面的这些场景,当我们处于上述场景的时候。...格式化字符串与格式符变量之间用一个 % 连接, % 两边各有一个空格附:当我们字符串中只有一个变量时,不需要使用元组进行包裹;超过一个时,就需要使用元组进行包裹。...# >>> 八进制14# >>> 十六进制d知识点指定了 :s ,则只能传字符串值,如果传其他类型值不会自动转换当你不指定类型时,你传任何类型都能成功,如无特殊必要,可以不用指定类型如果要结合数字编号关键字使用可以如下...:{:10}'.format("123"), "end")print('左对齐,宽度为10,不足补空格:{:>> 默认左对齐,宽度为10,不足补空格: 123 end# >>> 左对齐,宽度为10,不足补空格:123 end# >>> 右对齐,宽度为10,不足补空格:start

    7621

    算法竞赛入门【码蹄集新手村600题】(MT1001-1050)

    MT1016 宽度与对齐(1)题目描述输出455、-123、987654,宽度为5,分别左对齐右对齐格式输入格式: 无.undefined输出格式: 输出为整型,空格分隔。...MT1017 左右对齐(1)题目描述输出3.1415926、22.3456,宽度为14,精度为6,分别左对齐右对齐。格式输入格式: 无.undefined输出格式: 输出为实型,空格分隔。...MT1019 宽度精度(1)题目描述输出18.16054、17.676767,宽度精度由输入决定,右对齐。格式输入格式: 输入为宽度精度整型,空格分隔。....C++下应使用int)。...MT1047 梯形(1)题目描述输入梯形的两个底的长度高,输出梯形面积。格式输入格式: 输入实型,空格分隔.undefined输出格式: 输出实型,保留2位小数。

    2.7K90

    公司新来一个同事,把 Typora 玩得炉火纯青!太强悍了

    * 任何一种都可以,如+ 我是无序列表 加号内容之间需要放置一个空格 有序列表 语法格式:数字+点+空格+内容,如1....八、表格 语法格式: |左对齐|居中对齐|右对齐| |:----|:----:|---:| |左|中|右| 第二行分割表头内容,并声明内容的对齐格式。...打字机模式专注模式 通过 视图→→打字机模式/专注模式 开启或关闭: 「打字机模式」使得你所编辑的那一行永远处于屏幕正中央。 「专注模式」使你正在编辑的那一行保留颜色,而其他行的字体呈灰色。...空格与换行 空格:在输入连续的空格后,Typora 会在编辑器视图里为你保留这些空格,但当你打印或导出时,这些空格会被省略成一个。...硬换行:你可以通过 空格+ 空格+ shift+enter完成一次硬换行,而这也是许多 Markdown 编辑器所原生支持的。硬换行在文档被导出时将被保留,且没有换段的段后距。

    4.2K10

    Python str方法

    ;{:+.2f}—带符号保留小数点后两位{:.0f}—不带小数{:0>5d}—数字补零 (右对齐, 宽度为5,剩余以0填充){:a<5d}—数字补a (左对齐, 宽度为5,剩余以a填充){:,}—以逗号分隔的数字...返回一个原字符串左对齐,并使用空格填充至指定长度的新字符串。如果指定的长度小于原字符串的长度则返回原字符串。 ..., fillchar])  返回一个原字符串右对齐,并使用空格填充至长度 width 的新字符串。....rjust(20,'&') print(str2)  &&&&&&&&&&&NOSTALGIA 3、居中:str.center(width[, fillchar])  该方法返回一个原字符串居中,并使用空格填充至长度...如果指定 beg(开始) end(结束) 范围,则检查是否包含在指定范围内,如果包含子字符串返回开始的索引值,否则返回-1。

    53320

    《SQL开发样式指南》,让你的SQL代码更加规范

    General Theory 一般原则 Do 应该做的事情 使用一致的、叙述性的名称。 灵活使用空格缩进来增强可读性。...只在名字中使用字母、数字下划线。 不要在名字中出现连续下划线——这样很难辨认。 在名字中需要空格的地方用下划线代替。 尽量避免使用缩写词。使用时一定确定这个缩写简明易懂。..._addr 地址,有形的或无形的,如ip_addr Query syntax 查询语句 Reserved words 保留保留字总是大写,如SELECTWHERE。...注意WHEREFROM等关键字,都右对齐,而真实的列名都左对齐。...该值在不同表中的类型应该相同并且尽量不会更改。 该值是否会无法通过某种标准格式(如ISO发布的标准)?如 尽量让键保持简单,但在适当情况下不要害怕使用复合键。 以上是定义数据库时合乎逻辑的平衡做法。

    21010
    领券