资讯专栏INFORMATION COLUMN

DIV中文字换行显示

zxhaaa / 738人阅读

摘要:居然第一次遇到这种问题,还想了半天到底是怎么回事,为什么明明设置宽度了,里面的文字超过宽度后居然不换行。属性,可以让浏览器实现在任意位置换行。只在允许的断字点换行浏览器保持默认处理在长单词或地址内部进行换行,效果如下

居然第一次遇到这种问题,还想了半天到底是怎么回事,为什么明明div设置宽度了,里面的文字超过宽度后居然不换行。

(1)word-break属性,可以让浏览器实现在任意位置换行。

    normal:使用浏览器默认的换行规则

    break-all:允许在单词内换行,效果如下:

    

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

(2)word-wrap属性,允许长单词或URL地址换行到下一行。

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

    break-word:在长单词或 URL 地址内部进行换行,效果如下:

    

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1429.html

相关文章

  • 由一个项目需求引发的 - textarea换行和空格

    摘要:显示的时候,从后台获取到文本之后,去掉文中的所有空格,然后显示在标签里面。这里我用一个小例子来示意一下在各种情况下的保存和显示。首先尝试,去掉所有的空格,首先想到的就是方法。 当我们使用 textarea 在前台编辑文字,并用 js 提交到后台的时候,空格和换行是我们最需要考虑的问题。在textarea 里面,空格和换行会被保存为/s和/n,如果我们前台输入和前台显示的文字都是在 te...

    TNFE 评论0 收藏0
  • 由一个项目需求引发的 - textarea换行和空格

    摘要:显示的时候,从后台获取到文本之后,去掉文中的所有空格,然后显示在标签里面。这里我用一个小例子来示意一下在各种情况下的保存和显示。首先尝试,去掉所有的空格,首先想到的就是方法。 当我们使用 textarea 在前台编辑文字,并用 js 提交到后台的时候,空格和换行是我们最需要考虑的问题。在textarea 里面,空格和换行会被保存为/s和/n,如果我们前台输入和前台显示的文字都是在 te...

    Cheriselalala 评论0 收藏0
  • 一个后端开发者的前端语言基础:HTML5 & CSS

    摘要:每个标签可有一个独立的号。该标签是一个内联元素,与块级元素相反,内联元素不会自动在前后自动放置换行符,因此内联元素会默认在同一行显示。 前端语言基础:HTML5 & CSS (一) HTML5:超文本标记语言 (1) 基本概念 是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现,用于标记文本内容的含义 浏览器通过元素标签解析文本内容并...

    ACb0y 评论0 收藏0
  • 一个后端开发者的前端语言基础:HTML5 & CSS

    摘要:每个标签可有一个独立的号。该标签是一个内联元素,与块级元素相反,内联元素不会自动在前后自动放置换行符,因此内联元素会默认在同一行显示。 前端语言基础:HTML5 & CSS (一) HTML5:超文本标记语言 (1) 基本概念 是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现,用于标记文本内容的含义 浏览器通过元素标签解析文本内容并...

    DevWiki 评论0 收藏0
  • 一个后端开发者的前端语言基础:HTML5 & CSS

    摘要:每个标签可有一个独立的号。该标签是一个内联元素,与块级元素相反,内联元素不会自动在前后自动放置换行符,因此内联元素会默认在同一行显示。前端语言基础:HTML5 & CSS (一) HTML5:超文本标记语言 (1) 基本概念是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 )这些标签以<标签名称>的形式出现,用于标记文本内容的含义浏览器通过元素标...

    superPershing 评论0 收藏0

发表评论

0条评论

zxhaaa

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<