Fatal编程技术网
  • css/
  • Css 为什么在移动设备上测试时某些文本消失（看不见）？

Css 为什么在移动设备上测试时某些文本消失（看不见）？

css

Css 为什么在移动设备上测试时某些文本消失（看不见）？,css,viewport,responsive,Css,Viewport,Responsive,为什么在移动设备上测试时某些文本消失（看不见） 我想在移动设备上测试时显示所有文本。按全文怎么办 <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="

为什么在移动设备上测试时某些文本消失（看不见）

我想在移动设备上测试时显示所有文本。按全文怎么办

<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>


单击提交按钮后，如果所有字段都有效，FormValidation将提交表单。
您正在将
height
属性设置为
48px
。在窄屏幕上，文本必须换行才能显示。然而，有了这么小的高度，它就不会出现了

我建议您改为使用
min height
。

当您设置
溢出：隐藏并且视口的宽度太薄，不适合宽度的文本部分将消失

删除该选项将使文本分成更多行，但正如您定义的
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>  



单击提交按钮后，如果所有字段都有效，FormValidation将提交表单。



检查结果
尝试删除绝对位置并设置自动高度