美文网首页
css文本换行,超出显示...

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

作者: _信仰zmh | 来源:发表于2018-09-06 16:30 被阅读28次

单行文本:

{overflow: hidden;white-space: nowrap;text-overflow:ellipsis;}
  • white-space: nowrap/规定段落中的文本不进行换行/

  • text-overflow: ellipsis; /当对象内文本溢出时显示省略标记/
    多行文本:

{overflow:hidden;text-overflow:ellipsisline-height:20px;display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }

即对外层div定义为盒模型

  • overflow: hidden;/溢出盒子部分隐藏/
  • text-overflow: ellipsis; /当对象内文本溢出时显示省略标记/
  • display: -webkit-box; /* 定义为盒模型 */
  • -webkit-box-orient: vertical; /* 盒方向定义为竖直方向编排显示 */
  • -webkit-line-clamp: 2;/* 限制元素显示的文本行数,当前为2行*/

相关文章

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

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

  • css换行

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

  • Css3Two

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

  • VScode如何自动换行设置

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

  • 省略号

    CSS文本超出三行自动隐藏 显示省略号 CSS文本长度超出宽度如何显示省略号

  • CSS零碎

    CSS自动换行、强制不换行、强制断行、超出显示省略号 使用white-space属性强制不换行p { white-...

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

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

  • css多行超出显示省略号(兼容火狐)

    css 单行,超出部分显示省略号 补充:white-space,它主要是用来处理元素内文本的空白符、换行符以及是否...

  • Element-ui Checkbox 多选框 样式修改

    css 文字超出换行 一行显示一项 表格里的多选框

  • CSS 文字超出部分显示省略号

    不换行,超出部分显示省略号 换行,超出部分显示省略号

网友评论

      本文标题:css文本换行,超出显示...

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