资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/【效果实现】在照片上面显示一段文字，最多两行，多余部分用省略号表示

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

PascalXie / 2585人阅读

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

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

效果图：


html:

</>复制代码 
  1.   
  2.     
  3.     
    我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字
  4.   
  5.   
  6.   
    我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字
  7.   
  8.

css

</>复制代码 
  1.
单行文本溢出显示省略号 
</>复制代码 
  1. /* 单行文本溢出隐藏 */
  2.     .oneline {
  3.       width: 400px;
  4.       /* 不换行 */
  5.       white-space: nowrap;
  6.       /* 溢出隐藏 */
  7.       overflow: hidden;
  8.       /* 溢出的文本用省略号显示 */
  9.       text-overflow: ellipsis;
  10.     }
多行文本溢出显示省略号 
</>复制代码 
  1. /* 多行文本溢出隐藏 */
  2.     .text {
  3.       width: 200px;
  4.       /* 将元素作为box伸缩盒子 */
  5.       display: -webkit-box;
  6.       /* 设置文本排列方式 */
  7.       -webkit-box-orient: vertical;
  8.       /* 设置文本行数限制 */
  9.       -webkit-line-clamp: 2;
  10.       /* 溢出部分隐藏 */
  11.       overflow: hidden;
  12.       /* 文本溢出的部分显示省略号 */
  13.       text-overflow: ellipsis;
  14.     }
input 溢出显示省略号 
</>复制代码 
  1. /* input的溢出显示省略号 */
  2.     input {
  3.       /* 对于input只需要这一行,因为input本身就不会换行,本身就会溢出隐藏 */
  4.       text-overflow: ellipsis;
  5.     }
GPU云服务器 云服务器 js 最多显示两行 html显示在最上面 html 省略两行 multicharts如何在云主机上面用

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

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

相关文章

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

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

    alaege 评论0 收藏0

  • 如何让文本只显示两行——块级文字省略

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

    BetaRabbit 评论0 收藏0

  • 如何让文本只显示两行——块级文字省略

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

    zollero 评论0 收藏0

发表评论

登陆后可评论

0条评论

PascalXie

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<