【效果实现】在照片上面显示一段文字，最多两行，多余部分用省略号表示

PascalXie 发布于2019-08-02 15:32 / 2491人阅读

摘要：思路照片上面显示文字，怎么实现呢将照片作为的背景呀效果图多行文本溢出显示我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字单行文本溢出

思路：照片上面显示文字，怎么实现呢？
将照片作为div的背景呀！

效果图：

html:

我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字

我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字

css

单行文本溢出显示省略号

/* 单行文本溢出隐藏 */
    .oneline {
      width: 400px;
      /* 不换行 */
      white-space: nowrap;
      /* 溢出隐藏 */
      overflow: hidden;
      /* 溢出的文本用省略号显示 */
      text-overflow: ellipsis;
    }

多行文本溢出显示省略号

/* 多行文本溢出隐藏 */
    .text {
      width: 200px;
      /* 将元素作为box伸缩盒子 */
      display: -webkit-box;
      /* 设置文本排列方式 */
      -webkit-box-orient: vertical;
      /* 设置文本行数限制 */
      -webkit-line-clamp: 2;
      /* 溢出部分隐藏 */
      overflow: hidden;
      /* 文本溢出的部分显示省略号 */
      text-overflow: ellipsis;
    }

input 溢出显示省略号

/* input的溢出显示省略号 */
    input {
      /* 对于input只需要这一行,因为input本身就不会换行,本身就会溢出隐藏 */
      text-overflow: ellipsis;
    }

云服务器 GPU云服务器 js 最多显示两行 html显示在最上面 html 省略两行 multicharts如何在云主机上面用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54189.html

【效果实现】在照片上面显示一段文字，最多两行，多余部分用省略号表示

摘要：思路照片上面显示文字，怎么实现呢将照片作为的背景呀效果图多行文本溢出显示我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字单行文本溢出思路：照片上面显示文字，怎么实现呢？将照片作为div的背景呀！效果图： showImg(https://segmentfault.com/img/bVbuV...

alaege 2019-08-30 11:22 评论0 收藏0
如何让文本只显示两行——块级文字省略

摘要：在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定中字数超过限制之后的省略。单行文字的省略单行文字省略比较简单。在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定div中字数超过限制之后的省略。我们可以用css轻松做到。单行文字的省略单行文字省略比较简单。关键代码如下： .single { width: 280px; ...

BetaRabbit 2019-08-30 15:55 评论0 收藏0
如何让文本只显示两行——块级文字省略

摘要：在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定中字数超过限制之后的省略。单行文字的省略单行文字省略比较简单。在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定div中字数超过限制之后的省略。我们可以用css轻松做到。单行文字的省略单行文字省略比较简单。关键代码如下： .single { width: 280px; ...

zollero 2019-08-23 15:18 评论0 收藏0