DDR爱好者之家

纯CSS实现“文本溢出截断省略”的几种方法
站长资源 2024/11/24 佚名
62 1538
DDR爱好者之家 Design By 杰米

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？

一般来说，在做这样文字截断效果时我们更多是希望：

  • 兼容性好，对各大主流浏览器有好的支持
  • 响应式截断，根据不同宽度做出调整
  • 文本超出范围才显示省略号，否则不显示省略号
  • 省略号位置显示刚好

基于上述的准则，下面我们通过编码实践，给出一些答案。

单行文本溢出省略

核心 CSS 语句

  • overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容）
  • white-space: nowrap；（设置文字在一行显示，不能换行）
  • text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本）

优点

  • 兼容性好，对各大主流浏览器有好的支持
  • 响应式截断，根据不同宽度做出调整
  • 文本溢出范围才显示省略号，否则不显示省略号
  • 省略号位置显示刚好

短板

  • 只支持单行文本截断，并不支持多行

适用场景

  • 适用于单行文本溢出显示省略号的情况

Demo

<div class="demo">
      床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>
.demo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

效果示例

纯CSS实现“文本溢出截断省略”的几种方法

多行文本溢出省略（-webkit-line-clamp）

核心 CSS 语句

  • overflow: hidden；（文本溢出限定的宽度就隐藏内容）
  • -webkit-line-clamp: 2；（用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果，它需要组合其他的WebKit属性）
  • display: -webkit-box；（和 -webkit-line-clamp: 2；结合使用，将对象作为弹性伸缩盒子模型显示 ）
  • -webkit-box-orient: vertical；（和 -webkit-line-clamp: 2；结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）
  • text-overflow: ellipsis；（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)
     

优点

  • 响应式截断，根据不同宽度做出调整
  • 文本溢出范围才显示省略号，否则不显示省略号
  • 浏览器原生实现，所以省略号位置显示刚好

短板

兼容性一般： -webkit-line-clamp 属性只有 WebKit 内核的浏览器才支持

纯CSS实现“文本溢出截断省略”的几种方法

适用场景

多适用于移动端页面，因为移动设备浏览器更多是基于 WebKit 内核

Demo

<div class="demo">
      床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>
.demo {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

效果示例

纯CSS实现“文本溢出截断省略”的几种方法

多行文本溢出省略（伪元素 + 定位）

核心 CSS 语句

  • position: relative; （为伪元素绝对定位）
  • overflow: hidden; （文本溢出限定的宽度就隐藏内容）
  • position: absolute;（给省略号绝对定位）
  • line-height: 18px; （结合元素高度,高度固定的情况下,设定行高, 控制显示行数）
  • height: 36px; （设定当前元素高度）
  • ::after {} （设置省略号样式）
  • word-break: break-all; （如果文本中有英文，可以使一个单词能够在换行时进行拆分）
     

优点

  • 兼容性好，对各大主流浏览器有好的支持
  • 响应式截断，根据不同宽度做出调整

短板

  • 无法识别文字的长短，无论文本是否溢出范围，一直显示省略号省略号
  • 显示可能不会刚刚好，有时会遮住一半文字，跟文字没有贴合的很紧密

适用场景

文字内容较多，确定文字内容一定会超过容器的

Demo

<div class="demo">
      床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>
.demo {
    position: relative;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
    word-break: break-all;
}
.demo::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    
    /* 为了展示效果更好 */
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

效果示例

纯CSS实现“文本溢出截断省略”的几种方法

多行文本溢出省略（Float）

核心 CSS 语句

  • line-height: 20px；（结合元素高度,高度固定的情况下,设定行高, 控制显示行数）
  • overflow: hidden；（文本溢出限定的宽度就隐藏内容）
  • float: right/left；（利用元素浮动的特性实现）
  • position: relative；（根据自身位置移动省略号位置, 实现文本溢出显示省略号效果）
  • word-break: break-all；（如果文本中有英文，可以使一个单词能够在换行时进行拆分）
     

优点

  • 兼容性好，对各大主流浏览器有好的支持
  • 响应式截断，根据不同宽度做出调整
  • 文本溢出范围才显示省略号，否则不显示省略号

短板

省略号显示可能不会刚刚好，有时会遮住一半文字，跟文字没有贴合的很紧密

适用场景

文字内容较多，确定文字内容一定会超过容器的

Demo

<div class="demo">
      <div class="text">
        床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
      </div>
</div>
.demo {
  height: 40px;
  line-height: 20px;
  overflow: hidden;
}
.demo .text {
  float: right;
  margin-left: -5px;
  width: 100%;
  word-break: break-all;
}
.demo::before {
  float: left;
  width: 5px;
  content: "";
  height: 40px;
}
.demo::after {
  float: right;
  content: "...";
  height: 20px;
  line-height: 20px;
  padding-right: 5px;
  text-align: right;
  width: 3em;
  margin-left: -3em;
  position: relative;
  left: 100%;
  top: -20px;
  padding-right: 5px;
    
  /* 为了展示效果更好 */
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(255, 255, 255, 0)),
    to(white),
    color-stop(50%, white)
  );
  background: -moz-linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    white 50%,
    white
  );
  background: -o-linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    white 50%,
    white
  );
  background: -ms-linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    white 50%,
    white
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    white 50%,
    white
  );
}

效果示例

纯CSS实现“文本溢出截断省略”的几种方法

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米