CSS自动换行、强制不换行、强制断行、超出显示省略号

  • 时间:2018-08-22 23:42 作者:程序员小新人学习 来源:程序员小新人学习 阅读:177
  • 扫一扫,手机访问
摘要:P标签是默认是自动换行的,因而设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着用换行样式,尽管处理了问题,但是并没有发现本质起因,本质在于,我当时获取的数据是一长串的数字,浏览器应该是对数字和英文单词解决方式相近,不会

P标签是默认是自动换行的,因而设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着用换行样式,尽管处理了问题,但是并没有发现本质起因,本质在于,我当时获取的数据是一长串的数字,浏览器应该是对数字和英文单词解决方式相近,不会截断。

先给出各种方式,再具体详情每一个属性。

强制不换行

p { white-space:nowrap; }

自动换行

p { word-wrap:break-word; }

强制英文单词断行

p { word-break:break-all; }

*注意:设置强制将英文单词断行,需要将行内元素设置为块级元素。

超出显示省略号

p{text-overflow:ellipsis;overflow:hidden;}

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;

white-space 属性设置如何解决元素内的空白

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

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

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

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

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

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

word-wrap: normal|break-word;

word-wrap 属性使用来标明能否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

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

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

word-break: normal|break-all|keep-all;

word-break 属性使用来标明怎样样进行单词内的断句。

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

break-all:允许再单词内换行

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

举例看起区别:

Document

wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfs

wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui

wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf

wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa

wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

效果如下:

CSS自动换行、强制不换行、强制断行、超出显示省略号

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】PHP和Python实战bcrypt算法(2019-02-01 20:47)
【系统环境|服务器应用】PostgreSQL数据库安装Version10.5(2019-02-01 20:47)
【系统环境|服务器应用】Notepad++快速选中多行(2019-02-01 20:47)
【系统环境|服务器应用】Clover支持目录多标签页(2019-02-01 20:47)
【系统环境|服务器应用】计算机视觉 OpenCV Android | Mat像素操作(2019-02-01 20:46)
【系统环境|服务器应用】PHP | 运算符 知识梳理与运用实例(2019-02-01 20:46)
【系统环境|服务器应用】人工智能通识-数学-零基础矩阵运算(2019-02-01 20:46)
【系统环境|服务器应用】Android-打包AAR步骤以及最为关键的注意事项!(2019-02-01 20:46)
【系统环境|服务器应用】回转寿司你肯定吃过!——Android消息机制(构造)(2019-02-01 20:46)
【系统环境|服务器应用】Android中不规则形状View的布局实现(2019-02-01 20:46)
手机二维码手机访问领取大礼包
返回顶部