html - 随机换行符已添加到移动设备上的H2中

我正在使用一个包含信息栏（移动设备上为100％宽度）的UI，其中包含标题和发送消息的图标。这两个元素都是浮动的，但是当在移动设备（Android / iPhone）上查看网站时，它将标题分为两行。尽管有足够的空间将其保持在一行上，但它仍然可以做到。

将窗口调整为320px时，我在Mac上没有相同的问题。

任何想法？

.page_layout .page-head .info-bar {
    height: 60px;
    width: 100%;
}

.page_layout .page-head .info-bar h2 {
    float: left;
    font-size: 28px;
    font-weight: 500;
    color: #333;
    padding: 0;
    margin: 2px 0 0 5px;
}

.page_layout .page-head .info-bar .connect-icon {
    width: 40px;
    height: 40px;
    float: right;
    background-color: #A2AB58;
    margin-right: 1px;
    text-align: center;
    padding-top: 8px;
    cursor: pointer;
}

最佳答案

您可以尝试在h2上添加1px黑色边框，以查看是否确实有足够的空间，或者是否有一些边距/填充物在偷您一些px。

另一件事是设置以下css属性，然后在移动设备上重试：

white-space:nowrap;

关于html - 随机换行符已添加到移动设备上的H2中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18590473/