引言:

写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:

 

这个文本可能是单行的:

移动开发培训,Android培训,安卓培训,手机开发培训,手机维修培训,手机软件培训

 

也可能是多行的:

移动开发培训,Android培训,安卓培训,手机开发培训,手机维修培训,手机软件培训 

下面我就给大家展示如何简单或优雅地实现这种需求

 

单行文本溢出的省略

 

先上代码

移动开发培训,Android培训,安卓培训,手机开发培训,手机维修培训,手机软件培训

<div style =  'width:400px;
               height:40px;
               border:1px solid red;'>
        <p style='overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;'>
          这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本        </p>
</div>

网友评论