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

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

为此，如果您希望“裁剪”元素，则需要包含<form id="form"> <input id="input"></input> </form> <div id="output"> </div>值。此外，您还需要将文本元素的overflow: hidden值设置为0px。然后底部填充将内容推到原始顶部位置之上。

line-height

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

Answer 2

您可以将内容包装在<span>中，然后使用transform css属性来实现此目的

Stack Snippet

＆＃13;

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);
}

＆＃13;

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

＆＃13;

显示部分文字

2 个答案: