CSS 中的自动换行
我正在尝试实现以下显示。
我的 html 和css 是这样的...
<div class="label iepngfix">Nickname</div>
<div class="text">
<?php echo $nickname; ?>
</div>
.label {
float: left;
font-weight: bold;
padding: 0;
}
.text {
float: left;
margin: 0 0 0 5px;
word-wrap: break-word;
}
在 IE6、7 中它看起来很好，但是在 IE8、Chrome 和 Firefox 中，它看起来像这样...
我在这里错过了什么？
问候
I am trying to implement the following display.
My html & css are like this...
<div class="label iepngfix">Nickname</div>
<div class="text">
<?php echo $nickname; ?>
</div>
.label {
float: left;
font-weight: bold;
padding: 0;
}
.text {
float: left;
margin: 0 0 0 5px;
word-wrap: break-word;
}
In IE6, 7 it appears fine but, in IE8, Chrome and Firefox, it appears like this...
What am I missing over here?
Regards
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您的 CSS 和 HTML 并不真正匹配，但我的猜测是，由于您没有为第二个浮动提供宽度并且它包含长文本，因此浏览器会使其尽可能宽，因此它不会适合旁边第一个浮动。
或者您没有向我们展示的某些东西正在触发此操作。您的页面是否触发标准模式（例如，它是否有 DOCTYPE）？
Your CSS and HTML don't really match, but my guess is that since you don't give a width to the second float and it contains a long text, the browser makes it as wide as possible thus it won't fit beside the first float.
Or something you are not showing us is triggering this. Is your page triggering standards mode (e.g. does it have a DOCTYPE)?
如果您给 div.text 设置宽度，您将得到您正在寻找的结果。
示例：如果包含框是 250 像素，div.label 自然是 90 像素，那么 div.text 需要设置 155 像素或更小的宽度（考虑到 5 像素边距）。
If you give div.text a set width you will get the results that you're looking for.
Example: If the containing box is 250px, div.label is naturally 90px, then div.text needs a set width of 155px or less (that's taking it's 5px margin into account).