那些遇到过的问题

小编Ste*_*tho的帖子

webkit-line-clamp：文本对齐：右；打破文本溢出：省略号；

我的目标是：

  1. 限制文本行数
  2. 文本应该右对齐
  3. 文本溢出：3 点

text-align: right;当我添加到样式时，问题就开始了：3 个点的行为与没有text-align样式属性时不同：通常，3 个点位于文本容器之外（灰色）。

在此输入图像描述

比较“好”与“坏”风格；唯一的区别：“good”不包含text-align: right;样式属性。尝试使用这些样式中的字体大小，您会发现对于“好”样式，3 个点始终位于文本容器内（灰色背景），而对于“坏”样式，3 个点的位置是意外的（可能在内部）容器，或部分在里面，或完全在外面）

那么，是否有机会像“好”样式一样实现 3 点行为，但同时使文本正确对齐？考虑行数限制。

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #78b9f3;
  margin:0;
  font-family: "Arial";
}

.wrapper {
  display: flex;
  justify-content: center;
}

.card {
  background: #fff;
  box-shadow: 0 4px 24px 3px rgb(0 0 0 / 10%);
  padding: 20px;
  margin: 20px;
  width: 200px;
  height: auto;
  border-radius: 6px;
}

p …
Run Code Online (Sandbox Code Playgroud)

css

Ste*_*tho
2022 08-31
14
推荐指数
1
解决办法
3845
查看次数

标签 统计

css ×1