Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

wenyejie

wenyejie commented on May 24, 2019

@wenyejie
.one {
  text-align: center
}

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

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

rocky-191

rocky-191 commented on May 24, 2019

@rocky-191
.one {
  text-align: center
}

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

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

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

tzjoke

tzjoke commented on May 28, 2019

@tzjoke

@rocky-191 ff68支持了

tzjoke

tzjoke commented on May 28, 2019

@tzjoke

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

DarthVaderrr

DarthVaderrr commented on Jul 4, 2019

@DarthVaderrr

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

Vi-jay

Vi-jay commented on Jul 29, 2019

@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

jiamianmao commented on Aug 11, 2019

@jiamianmao

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

justfn

justfn commented on Sep 10, 2019

@justfn

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

用法如下:

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

Konata9

Konata9 commented on Sep 17, 2019

@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

canwdev commented on Nov 11, 2019

@canwdev
zxl-lxz

zxl-lxz commented on Mar 26, 2020

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

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

chenyuwen456456 commented on Jun 28, 2020

@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

blueRoach commented on Jul 9, 2020

@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

hou499 commented on Aug 20, 2020

@hou499

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

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

smile-2008

smile-2008 commented on Oct 28, 2020

@smile-2008
.one {
  text-align: center
}

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@wenyejie@haizhilin2013@Konata9@canwdev

        Issue actions

          [css] 第38天 实现单行文本居中和多行文本左对齐并超出显示"..." · Issue #141 · haizlin/fe-interview