在移动设备上，文本未在 div 内换行

Question

我在 div 标签内有一段文本，在桌面上看起来很棒，但是当您缩小移动页面并且 div 堆叠时，文本不会包裹并从侧面掉下来。我对此不是很有经验，但我真的很想学习如何解决这个问题。

我的 CSS 为 div

#homemain {
line-height: 15px;
background-color: transparent;
height: 500px;
width: 600px;
float: left;
padding: 10px;
font-size: 100%;
margin: 10px;
word-wrap: break-word;
}

页面上我的HTML

<div id="homemain">
[rev_slider home_small]
&nbsp;
<h2>[title size="2"]Explore Our Services[/title]</h2>
Text text text, texty text, lots and lots of stuff about our services and what we do. We really want you to use our services and what not. We're the best.
</div>

顺便说一下，这是 WordPress 中的一个页面，如果这对这里有很大影响的话。我没有创建页面，只是继承了它并负责修复它，因为我是办公室里最多 "techie" 的人。幸运的我！对此的任何帮助都会有所帮助。

Answer 1

您遇到的问题（我怀疑）是 #homemain 仍然显示为 600px 宽，即使在屏幕宽度小于 600px 的屏幕上也是如此。

您需要的是 #homemain 在比 600px 窄的屏幕上全屏宽度，但在比 600px 宽的屏幕上不超过 600px 宽度.

试试这样的：

#homemain {
[...]
width: 99%;
max-width: 600px;
[...]
}

Answer 2

问题是您想要响应式布局，但您使用的是非响应式方法。请记住，为了获得响应式布局，您需要考虑非固定尺寸（%、rem 等）

所以，在你的代码中，你有这个：

#homemain {
line-height: 15px;
background-color: transparent;
height: 500px;
width: 600px;
float: left;
padding: 10px;
font-size: 100%;
margin: 10px;
word-wrap: break-word;
}

您应该将其更改为：

#homemain {
line-height: 15px;
background-color: transparent;
height: 500px;
max-width: 100%;
float: left;
padding: 10px;
font-size: 100%;
margin: 10px;
word-wrap: break-word;
}

但是，如果你需要在桌面上有 600px 的宽度，那么你可以使用这个：

@media handheld, only screen and (min-width: 767px) {
    #homemain {
    line-height: 15px;
    background-color: transparent;
    height: 500px;
    width:600px;
    max-width: 600px;
    float: left;
    padding: 10px;
    font-size: 100%;
    margin: 10px;
    word-wrap: break-word;
    }
}

对于较小的屏幕：

@media handheld, only screen and (max-width: 767px) {
    #homemain {
    line-height: 15px;
    background-color: transparent;
    height: 500px;
    width:600px;
    max-width: 320px; /* or whatever size you want */
    float: left;
    padding: 10px;
    font-size: 100%;
    margin: 10px;
    word-wrap: break-word;
    }
}

这样，通过使用 media types，您可以更好地控制不同尺寸的布局

在移动设备上，文本未在 div 内换行

Text not wrapping inside div on mobile

html

css

wordpress