在下面的示例中，文本超出了框的范围。当我减小浏览器的大小时，框的大小相应地缩小，但文本变得杂乱无章。如何解决这个问题？
<html>
<head>
<meta charset="utf-8">
<title>This is an email template</title>
<style>
body {
background-color: rgba(79, 183, 227, 0.4);
direction: rtl;
}
body * {
font-family: Tahoma;
}
a:link {
text-decoration: none;
margin-right: 25px;
color: #46B1F9;
}
#wrap {
background-color: #e0f2f6;
margin: auto;
width: 75%;
padding: 15px;
border: 1px solid grey;
}
.item {
border: 1px solid #95A5A6;
border-radius: 5px;
margin-bottom: 25px;
width: 60%;
display: inline-block;
}
.item p {
font-size: 1em;
}
.item img {
float: left;
width: 30%;
}
.item .notice {
text-align: center;
float: right;
padding-top: 25px;
padding-right: 25px;
width: 50%;
height: 1em;
}
/*clearfixes*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
</style>
</head>
<body>
<div id="wrap">
<div style="padding:15px;">
<div class="item clearfix">
<div class="notice">
<p><strong>Lorem ipsum</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
</div>
<img src="http://s14.postimg.org/wqzq39iht/image.jpg" alt="" />
</div>
<div class="item clearfix">
<div class="notice">
<p>
<strong>اLorem ipsum</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
</div>
<img src="http://s10.postimg.org/y4kk17q21/image.jpg" alt="" />
</div>
<div class="item clearfix">
<div class="notice">
<p><strong>Lorem ipsum</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
</div>
<img src="http://s3.postimg.org/xca6ju1kj/image.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
如果您尝试按内容扩展 block ，从 .item .notice 中删除高度应该可以解决问题。
关于html - 文本超出 Css 框的限制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29056325/