css流式布局与多行省略号显示

此文仅供自己记录使用。若有雷同，敬请谅解！

流式布局

即文档常规流，指的是页面元素按照默认情况下页面元素正常的排列方式，内联元素按内联方向一个接一个显示。块元素从顶部开始向下显示并移动页面。

脱离文档流的方式

1、absolute定位

绝对定位，元素会被移出正常文档流。不会给元素预留空间，元素依据最近的非static定位的祖先元素来确定元素的位置。

2、fixed定位

固定定位，元素会被移除正常文档流，不会给元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置

3、float为非none

float属性指定css元素应该沿容器的左侧或者右侧平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

多行省略号显示

直接上代码

<template>
    <div class="tump-wrap" :style="`height:${tumpHeight}px`">
        <span>{{tumpCnt}}</span>
    </div>
</template>
<script>
export default {
    props:{
        tumpCnt: {
            type: String | Number,
            default: 'tump测试内容'
        },
        tumpHeight: {
            type: Number,
            default: 48
        }
    }
}
</script>
<style scoped>
    .tump-wrap{
        position: relative;
        overflow: hidden;
        width: 100%
    }
    .tump-wrap::before{
        float: left;
        width: 5px;
        height: 100%;
        content: '';
    }
    .tump-wrap>span{
        width: 100%;
        margin-left: -5px;
        float: right;
        line-height: 24px;
    }
    .tump-wrap::after{
        content: '...';
        float: right;
        width: 30px;
        left: 100%;
        top: -24px;
        margin-left: -25px;
        position: relative;
        background: linear-gradient(90deg,hsla(0,0%,100%,0),#fff 60%,#fff);
    }
</style>
           

志不达者智不强