CSS基础: 单行和多行文本溢出显示省略号

文本溢出后很多,会显示一些省略号,这个在很多网站都会这样做,从技术层次来分析有两种,一种是前端通过css或者JavaScript进行进行,还有一种是后端传递文字的时候,本身处理完长度,然后返回一个嗲有省略号的文字。

而这个放在CSS专栏聊,自然就会聊在CSS 中如何解决这个问题,在CSS中对于行数不同不可以分单行文本溢出和多行文本溢出。

单行文本溢出

如果解决文本溢出显示省略号,需要满足的三个条件:

  • 先强制一行内显示文本

    white-space:nowrap;/*默认normal 自动换行*/
    
  • 超出的文本隐藏起来。

    overflow:hidden;
    
  • 文本省略部分替代超出的部分

    text-overflow:ellipsis; /*默认是clip 超出部分直接切除*/
    

演示:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档title>
    <style>
        .d1{
            width: 200px;
            height: 110px;
            border: 1px solid black;


        }
        img{
            vertical-align: middle;
        }
        .d2{
            width: 90px;
            height: 110px;
            float: right;
                font-size: 12px;
            font-style: normal;
            line-height: 110px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
     
    style>
head>
<body>
<div class="d1" >
    <img src="jpg/ys.png" />
    <div class="d2">芭芭拉黑夜之中竟然被一圈小水球怪物围殴,是道德的的沦丧还是人性的扭曲。div>

div>
body>
html>

CSS基础: 单行和多行文本溢出显示省略号_第1张图片

多行文本溢出

多行文本溢出显示省略号,有较大的兼容性问题,适合于webkit’浏览器火移动端(移动端大部分是webkit内核。)

上面的原因也是为什么不建议在前端通过CSS进行设置,而是要求后台返回的数据就是带有省略号的规定内容。

  • 隐藏超出部分

    overflow:hidden;

  • 弹性伸缩盒子模型显示:

    display:-webkit-box;

  • 限制一个块元素显示的文本行数

    -webkit-line-clamp:2;

  • 设置或检索伸缩盒对象的子元素的排列方式

    -webkit-box-orient:vertical;

演示:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档title>
    <style>
        div{
            width: 200px;
            height: 110px;
            border: 1px solid black;
            overflow:hidden;
            display:-webkit-box;
            -webkit-box-orient:vertical;
        }
        .d1{
            -webkit-line-clamp:2;
        }
        .d2{
            -webkit-line-clamp:3;
        }
        .d3{
             height: 40px;
            -webkit-line-clamp:2;
        }
    style>
head>
<body>
<div class="d1">
    芭芭拉黑夜之中竟然被一圈小水球怪物围殴,是道德的的沦丧还是人性的扭曲。

div>

<div class="d2">
    芭芭拉黑夜之中竟然被一圈小水球怪物围殴,是道德的的沦丧还是人性的扭曲。

div>
<div class="d3">
    芭芭拉黑夜之中竟然被一圈小水球怪物围殴,是道德的的沦丧还是人性的扭曲

div>

body>
html>

CSS基础: 单行和多行文本溢出显示省略号_第2张图片

可以看出多行溢出显示省略号,不但要控制行数,还要让显示文本的宽度和文本行数所占的宽度一样高,而且必须文字的长度要炒作控制行数的行,不然也不会显示省略号,所以很多时候如果通过css实现,有点琐碎。所以通过后台返回文字进行展示,而不是前端修改。

所以说知道可以实现即可,但是工作中通过后台实现。

你可能感兴趣的:(CSS,css,单行溢出,多行溢出,省略号,white-space)