flex和shape-outside解决safair下省略号兼容问题
常规的解决多行省略号的方法是使用 display: -webkit-box，但这种方法在Safari浏览器下会导致每行文字右侧空隙过大，而且使用两端对齐文本会与省略号重叠。为了避免这些问题，通常需要使用伪元素模拟省略号，但这种方法需要计算高度以判断省略号的显示和隐藏。
另一种解决方法是使用 flex 和 shape-outside 来模拟省略号。使用 flex 可以让文本块在垂直方向上自动分配空间，并将文本块的边缘与省略号的边缘对齐。然后，使用 shape-outside 属性将省略号的形状设置为一个矩形，它将在文本块的右侧创建一个空白区域，使省略号不会与文本重叠。
以下是使用 flex 和 shape-outside 实现省略号的示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.con {
width: 310px;
resize: horizontal;
display: flex;
position: relative;
border: 10px solid transparent;
outline: 2px dashed;
overflow: hidden;
text-align: justify;
}
.txt {
line-height: 1.5;
max-height: 4.5em;
/*1.5 * 3*/
overflow: hidden;
}
.txt {
line-height: 1.5;
overflow: hidden;
max-height: 4.5em;
}
.txt::before {
content: "...";
float: right;
/* background-color: red; */
height: 100%;
display: flex;
align-items: flex-end;
shape-outside: inset(calc(100% - 1.2em) 0 0 0);
margin-left: 2px;
}
.txt::after {
content: "";
position: absolute;
width: 999vh;
height: 999vh;
background: aliceblue;
box-shadow: -2em 2em aliceblue;
pointer-events: none;
}
</style>
</head>
<body>
<div class="con">
<div class="txt">
Stable diffusion的门槛要被彻底终结了，一个人人都可以玩sd 的时代来了。
</div>
</div>
</body>
</html>在上面的代码中，.con 元素使用 flex 布局，并将其最大高度设置为三行的高度。.txt 元素使用 flex 属性来自动分配垂直空间，并将省略号的右侧边缘与文本的右侧边缘对齐，shapes布局可以很轻易的实现任意形状的环绕效果，这里使用环绕效果保证了文本对齐效果，再用一个矩形遮挡省略号，绝对定位的元素不设置top和left会跟随文本内容，就实现了自动隐藏省略号的效果。
最新评论