Question

我有一个按钮，其大小在vm＆＃39; s中指定。里面的文字也有vm＆＃39; s中指定的字体大小。当按钮变得小于给定大小时，文本溢出容器并位于按钮下方。我怎样才能解决这个问题？（我打算使用媒体查询，因此按钮不会变得非常小，但是当按钮中等大小时，这不会解决问题。）

我的HTML如下：

<div class="socialMediaBtn" id="githubBtn">
    <a href="#"><i class="fa fa-github"></i> Github </a>
</div>

我的css：

.socialMediaBtn {
    font-size: 1.25vw;
    border-radius: 10px;
    width: 15vw;
    height: 2.75vw;
    text-align: center;
    vertical-align: middle;
    line-height: 50px;
    display: inline-block;
    color: #003333;
    background-color: white;
    padding: 0px;
    overflow: hidden;
}

.socialMediaBtn > a {
    text-decoration: none;
    color: #003333;
    height: 2.75vw;
    width: 15vw;
    display: block;
    border-radius: 10px;
}

.socialMediaBtn > a:hover {
    background-color: #669999;
    color: white;
}

我还在页面顶部有一个链接标记，用于导入font-awesome.min.css。

这是一个jsFiddle，尝试调整窗口大小以查看问题。 https://jsfiddle.net/1pwyn5ko/。（在我的网页上，按钮的文本实际上可以在按钮下方看到，而不仅仅是消失，除非我给div分配溢出：隐藏的css属性）。

Answer 1

你有一个动态高度（height: 2.75vw;），但你有一个固定的行高（line-height: 50px;）。

只需将你的行高设置为相同的动态高度，你就可以了！

.socialMediaBtn {
    font-size: 1.25vw;
    border-radius: 10px;
    width: 15vw;
    height: 2.75vw;
    text-align: center;
    vertical-align: middle;
    line-height: 2.75vw;
    display: inline-block;
    color: #003333;
    background-color: white;
    padding: 0px;
    overflow: hidden;
}

请参阅更新的小提琴：https://jsfiddle.net/1pwyn5ko/1/

vm中指定的按钮具有溢出文本

1 个答案: