显示部分文本行

Question

如何在文本区域或标签中显示文本行的下半部分？在我的 CSS 中，我有这个

.label {
  font-size: 13px;
  height: 7px;
  width: 200px;
  display: inline-block;
  overflow:hidden;
}
<label class="label">TEST CODE</label>

这样做的作用是显示标签的上半部分，就好像该行被截断一样。例如，字母 O 将显示为类似于 n 的半圆弧。我需要这种类型的显示器，它对我有用。

我需要做的是只显示线条的底部，这样字母 O 上的半圆弧看起来就像一个 u。我不能使用蒙版，因为我在标签下方显示图像，因此它必须具有透明背景。我尝试了填充底部，但这没有帮助。任何建议将不胜感激。

Answer 1

根据我的理解，您正在尝试水平裁剪文本的上半部分，而不是切断下半部分。

为此，如果您希望"裁剪"元素，则需要包含一个overflow: hidden值。此外，您需要将文本元素的line-height值设置为 0px。然后，底部填充会将内容推到原始顶部位置上方。

.crop-top {
  overflow: hidden;
  font-size: 13px;
  line-height: 0px;
  height: 7px;
  width: 200px;
  padding-bottom: 7px;
  display: inline-block;
}

<label class="crop-top">THIS TEXT IS CROPPED</label>

Answer 2

您可以将内部内容包装在<span>中，然后使用 transform css 属性来实现这一点

堆栈代码段

body {
  background: black;
  color: white;
  margin: 0;
}
div {
  margin-bottom: 30px;
}
.upper,
.bottom {
  font-size: 50px;
  line-height: 50px;
  height: 25px;
  display: block;
  overflow: hidden;
  vertical-align: top;
  color: red;
}
.bottom {
  transform: rotateX(180deg);
  margin-top: 10px;
  color: yellow;
}
label span {
  line-height: 50px;
  display: block;
}
.bottom span {
  transform: rotateX(180deg);
}

<div>
  <label class="upper"><span>HELLO</span></label>
  <label class="bottom"><span>HELLO</span></label>
</div>
<div>
  <label class="upper"><span>WELCOME</span></label>
  <label class="bottom"><span>WELCOME</span></label>
</div>