CSS 超出一行(多行)显示省略号 ... ellipsis

文章目录

    • 问题描述
    • 案例
      • 一行超出部分显示...的逻辑说明:
      • 多行超出部分显示...的样式说明
      • 效果

问题描述

在写静态页面的时候,经常会遇到**超出宽度就显示省略号…**的需求,有时候在移动端,甚至是要针对多行,显示省略号的需求,使用JS逻辑比较麻烦,再次使用CSS实现该功能,方便以后查阅

案例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<style>
.one-line{    
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}
.three-line{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
style>
<body>
    <div style="width: 100px;" class="one-line">
        我是一篇非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的标题
    div>

    <div style="width: 100px;" class="three-line">
        我是一篇非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的标题
    div>
body>
html>

一行超出部分显示…的逻辑说明:

  1. 宽度要确定
  2. 不能换行
  3. 超过部分不显示
  4. 超出部分使用 ellipsis

多行超出部分显示…的样式说明

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

效果

CSS 超出一行(多行)显示省略号 ... ellipsis_第1张图片

你可能感兴趣的:(css,css3,sass,less)