Fe-interview: [css] 第38天 实现单行文本居中和多行文本左对齐并超出显示"..."

[haizhilin2013]

第38天 实现单行文本居中和多行文本左对齐并超出显示"..."

[wenyejie]

.one {
  text-align: center
}

.multi {
  overflow: hidden
  text-overflow: ellipsis
  display: -webkit-box
  -webkit-line-clamp: 3
  -webkit-box-orient: vertical
}

可惜多行文本省略, 有严重的兼容性问题

[rocky-191]

.one {
  text-align: center
}

.multi {
  overflow: hidden
  text-overflow: ellipsis
  display: -webkit-box
  -webkit-line-clamp: 3
  -webkit-box-orient: vertical
}

可惜多行文本省略, 有严重的兼容性问题

是啊，谷歌内核的才支持这个写法

[tzjoke]

@rocky-191 ff68支持了

[tzjoke]

@wenyejie 多行溢出不需要 text-overflow: ellipsis 吧

[DarthVaderrr]

多行文本溢出目前没有解决方案

[Vi-jay]

 .container {
      text-align: center;
      height: 100px;
      width: 100px;
      overflow: hidden;
      word-break: break-all;
      .content{
        text-align: left;
        display: inline-block;
      }
    }

ps:实现了单行居中 多行居左 但是没办法并且超出显示... 估计是用伪元素遮住最后几个文字显示...

[jiamianmao]

愚兄前些年看过篇文章，与众贤弟分享一下。
单行居中显示文字，多行居左显示，最多两行超过用省略号结尾

[justfn]

多行显示非Chrome只能使用JS来完成了啊, 写的一个方法 供参考

用法如下:

multiRowsEllipsis(elem,rows=2,sym='...',autoMode=true)   // 多行省略号,返回最终的字符串  
    elem      显示文本的且需设置多行省略的元素 
    rows      行数 
    sym       省略号字符串 
    autoMode  是否自动改变 [vue中需交给vue来维护,将返回最终的字符串重新赋值到文本显示区]

[Konata9]

• 单行文本居中。在 webkit 内核中适用。非 webkit 内核，可以是用 js 或者用 ::after 模拟。

  .single-text{
      width: 500px;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      color: white;
      background: lightblue;
      display: box;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
  }
  

• 多行文本左对齐。多行文本没有很好的解决方法，只能依赖 js 或者 css 的相对定位。

  .multi-text{
      width: 50%;
      height: 4.5rem;
      line-height: 1.5;
      padding: 20px;
      background: lightblue;
      overflow: hidden;
      position: relative;
      box-sizing: border-box;
  
      &::after{
          content: '...';
          height: 1.5rem;
          position: absolute;
          bottom: 5px;
          right: 5px;
      }
  }
  

示例代码：https://codepen.io/Konata9/pen/RwbYbRG

[canwdev]

可能是最全的 “文本溢出截断省略” 方案合集 - 掘金

[1282772905]

.linex(@num) {
  display: -webkit-box;
  overflow: hidden;
  word-break: break-all;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: @num;
}

[chenyuwen456456]

.one {
        text-align: center
}
.content{
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="one" style="width: 150px;border: 1px solid;">
    <div class="content" style="width: 120px;border: 1px solid red;margin: auto;">吉林省框架的吉林省框架的吉林省框架的吉林省框架的</div>
</div>

[blueRoach]

<h1><p><em></em></p></h1>
h1{ text-align: center; }
p
{
display: inline-block;
text-align: left;
}
em
{
display: -webkit-box; // 设置display，将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp: 2; // 限制在一个块元素显示的文本的行数
-webkit-box-orient: vertical; // 规定框的子元素应该被水平或垂直排列
}

以上方法仅在高版本google和firefox适用

要想适配所有浏览器和低版本需要和JS一起实现，判断字数是否超过两行，然后只留下两个的字符再减2，再在最好加上......

[hou499]

纯css https://codepen.io/hou499/pen/OJNRezZ
第二种方法会让单行文本的标签也占两行但是较第一种来说兼容性好

可能是最全的 “文本溢出截断省略” 方案合集

[MrZ2019]

.one {
  text-align: center
}

.multi {
  overflow: hidden
  text-overflow: ellipsis
  display: -webkit-box
  -webkit-line-clamp: 3
  -webkit-box-orient: vertical
}

可惜多行文本省略, 有严重的兼容性问题