html - 标签文本重叠单选按钮

Question

仅在 iPhone 5 上(在所有其他屏幕上看起来不错)我遇到了此标签文本与单选按钮重叠的问题:

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3">
    <input type="radio" id="qMCa" value="TextMessage"><label for="qMCa"><span></span>Text Message</label>
</div>

这是 label

的 css

label {
    display: flex;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

这是它在 iPhone 5 上的样子:

如果我将标签的 display 更改为 block，我会得到:

文本需要排成一行，并且不能与单选按钮重叠。我一直在研究 this thread 和 this one ，但到目前为止还没有搞定。

Answer 1

尝试给 whitespace:nowrap;为了避免文本 split ，对于那个跨度的文本消息