美文网首页
文本超出换行.....

文本超出换行.....

作者: adustdu2015 | 来源:发表于2018-06-23 09:44 被阅读0次

文本多行溢出溢出

display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

文本强制换行

强制不换行
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:只能在半角空格或连字符处换行

相关文章

  • 文本超出换行.....

    文本多行溢出溢出 文本强制换行 强制不换行p { white-space:nowrap; }自动换行p { wor...

  • VScode如何自动换行设置

    VScode安装完默认不能自动换行,需要我们手动配置。 文本超出显示时,会溢出,如图:文本超出范围,不能自动换行 ...

  • css两行超出隐藏,css清除浮动,CSS中划线(删除线)(价格

    超出隐藏,不换行,省略号 overflow:hidden; //超出的文本隐藏 text-overflow:ell...

  • 常用样式

    超出隐藏,不换行,省略号 overflow:hidden; //超出的文本隐藏text-overflow:el...

  • CSS实现单行、多行文本溢出显示省略号

    一、单行文本溢出显示省略号 四个要素: ① 宽度固定; ② 不允许换行; ③ 超出隐藏; ④ 文本超出用省...

  • css文本换行,超出显示...

    单行文本: white-space: nowrap/规定段落中的文本不进行换行/ text-overflow: e...

  • css换行

    css的换行显示 1. 浏览器默认显示 文本超出不会断开换行,以单词断句换行 2.word-wrap: break...

  • 常用CSS3属性整理

    文本 ?文本超出部分折叠 word-warp 边界换行 normal 默认 break-word 内容将在边界内换...

  • 微信小程序 小知识

    横向布局 横向布局 自动换行 Flex 布局教程:语法篇 文本自动换行 文字超出用省略号显示 wx.switchT...

  • Css3Two

    文本溢出样式设置 文本超出容器以后: 换行显示 超出容器部分也显示 伪类和伪元素 伪类和伪元素 都是css中的伪类...

网友评论

      本文标题:文本超出换行.....

      本文链接:https://www.haomeiwen.com/subject/xerryftx.html