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

Posted 2021-09-22

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

流式布局

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

脱离文档流的方式

1、absolute定位

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

2、fixed定位

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

3、float为非none

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

以上都是对基础知识的回顾。

多行省略号显示

思路：

1
左侧部分为基准高度，当主题部分红色区域内容超过左侧高度时，我们让橘色部分显示在左下角。当主题部分等于或小于左侧高度时，让其贴在右边角。我们让左下角显示的部分移动到右侧主题部分底角与下边缘重合。
可行的方案：
让主体部分右浮动，省略号部分右浮动，同时要让省略号部分能够填充到左侧部分，利用margin负值来解决。负值<= -（省略号部分的宽度 - 左侧部分的宽度）。然后通过left:100%调整其相对于自身（position:relative)位置到右侧，并通过调整top来达到与右侧部分底部重合。

直接上代码

<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>

志不达者智不强