Question

为什么在移动设备上测试时某些文字会消失（看不到）？

我想在移动设备上测试时显示所有文字。通过全尺寸文字我该怎么办？

<html>
<head>  
    <meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" name="viewport">
</head>
<body style=" margin: 0; ">
<div style="
    width: 100%;
    height: 48px;
    text-align: center;
    overflow: hidden;
    display: block;
    position: absolute;
    background: #a5d670;
    z-index: 999;
    color: #fff;
    font-size: 20px;
    line-height: 48px;
">After clicking the submit button, FormValidation will submit the form if all the fields are valid.
</div>  
</body>
</html>

Answer 1

您将height属性设置为48px。在狭窄的屏幕上，文本必须包装，以便显示。然而，由于这个小高度，它不会出现。

我建议你改用min-height。

Answer 2

当您设置overflow: hidden;并且视口的宽度太薄时，不适合宽度的文本部分将消失。

删除它会使文本分成更多行，但是当您定义height: 48px;时，文本将呈现在绿色背景之外，为了显示剩下的文本，您应该这样做：

<div style="
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    background: #a5d670;
    z-index: 999;
    color: #fff;
    font-size: 20px;
    line-height: 48px;
">After clicking the submit button, FormValidation will submit the form if all the fields are valid.
</div>

检查this fiddle的结果

为什么有些文字在移动设备上测试时会消失（看不到）？

2 个答案: