Question

你知道为什么我的文字是垂直剪切的吗？我希望<div>将其高度调整为文本的高度。感谢。

<div class="wrapper">
<div class="block-left bigtext">left</div>
<div class="block-right">right</div>
</div>

.bigtext {
    color: #333;
    font-weight: 600;
    font-size: 53px;
    line-height: 12px;
    text-align: right;
}

.wrapper {
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    overflow: hidden;
    background:red;

}   

.block-left {
    float: left;
    box-sizing: border-box;
    padding-right: 20px;
    width: 50%;

}
.block-right {
    float: right;
    box-sizing: border-box;
    width: 50%;

}

Answer 1

更正了bigtext类..

.bigtext {
    color: #333;
    font-weight: 600;
    font-size: 53px;
    line-height: 64px;
    text-align: right;
}

行高应始终大于字体大小..

Answer 2

这是因为行高css样式删除：

line-height: 12px;

让<div>调整其高度以适合文字。

Answer 3

正确调整到文本高度，设置为12px。试试这个：

.bigtext {
    color: #333;
    font-weight: 600;
    font-size: 53px;
    text-align: right;
}

.wrapper {
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    overflow: hidden;
    background:red;

}   

.block-left {
    float: left;
    box-sizing: border-box;
    padding-right: 20px;
    width: 50%;

}
.block-right {
    float: right;
    box-sizing: border-box;
    width: 50%;

}

DIV没有调整到文本高度。为什么？

3 个答案: