css - Safari 剪切按钮的文本

Question

在 safari 浏览器上我遇到了这个问题:

我试过 overflow: visible; 但没有用，我在这个按钮上使用了 bootstrap css 类:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
     <div class="container-fluid">
        <table>
            <tr>
                <td class="float-left">
                    <a href="#"> <img class="img-responsive brand" />
                    </a>
                </td>
                <td class="col-md-2">
                    <br>
                    <br>
                    <br>
                    <div class="btn-group">
                        <div class="row">
                            <button type="button" class="btn btn-link col-xs-6"><span class="glyphicon glyphicon-log-out"></span> LOG OUT</button>
                            <button type="button" class="btn btn-link col-xs-6"><span class="glyphicon glyphicon-dashboard"></span> Return To Dashboard</button>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</header>

Answer 1

这里的问题是您的容器对于您的按钮来说不够大。您有两个选择:

更改您的按钮类

目前您正在使用 col-xs-6，每列的宽度为 50%。但是，您可以在第一列中留出一些空间来给第二列。请参阅下面的代码段。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
     <div class="container-fluid">
        <table>
            <tr>
                <td class="float-left">
                    <a href="#"> <img class="img-responsive brand" />
                    </a>
                </td>
                <td class="col-md-2">
                    <br>
                    <br>
                    <br>
                    <div class="btn-group">
                        <div class="row">
                            <button type="button" class="btn btn-link col-xs-4"><span class="glyphicon glyphicon-log-out"></span> LOG OUT</button>
                            <button type="button" class="btn btn-link col-xs-8"><span class="glyphicon glyphicon-dashboard"></span> Return To Dashboard</button>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</header>

将您的表格宽度更改为 100%

正如 Awadhesh 提到的，您应该将 table 元素设置为 100% 宽度。尽管应尽可能避免使用表格进行布局。

table { width: 100% }

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <header>
         <div class="container-fluid">
            <table>
                <tr>
                    <td class="float-left">
                        <a href="#"> <img class="img-responsive brand" />
                        </a>
                    </td>
                    <td class="col-md-2">
                        <br>
                        <br>
                        <br>
                        <div class="btn-group">
                            <div class="row">
                                <button type="button" class="btn btn-link col-xs-6"><span class="glyphicon glyphicon-log-out"></span> LOG OUT</button>
                                <button type="button" class="btn btn-link col-xs-6"><span class="glyphicon glyphicon-dashboard"></span> Return To Dashboard</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </header>