Question

如何将文字保留在盒子类中？没有文本溢出在框的右侧。我试着弄清楚两个小时似乎无法得到它。

<html>
<head>

 <style type="text/css">
.box {
  width:250px;
  padding-top:5px;
  border-style:solid;
  border-color:#336699;
  border-width:1px;
  padding-left:3px;
  padding-bottom:10px;
}
</style>

</head>

<body>

       <p class="box">
         <span>
           <a href="http://localhost/Latest Artical 1.htm"><b>Latest Artical 1</b></a><br />Blah...Blah...Blah...Blah...Blah...Blah...Blah...Blah...Blah...Blah...<br /><br />
           <a href="http://localhost/Latest Artical 2.htm"><b>Latest Artical 2</b></a><br />Blah...Blah...Blah...Blah...Blah...Blah...Blah...Blah...Blah...Blah...<br /><br />
           <a href="http://localhost/Latest Artical 5.htm"><b>Latest Artical 5</b></a><br />Blah...Blah...Blah...Blah...Blah...Blah...Blah...Blah...Blah...Blah...<br /><br />
        </span>
       </p>   

</body>
</html>

Answer 1

使用此代码word-wrap: break-word;

.box {
  width:250px;
  padding-top:5px;
  border-style:solid;
  border-color:#336699;
  border-width:1px;
  padding-left:3px;
  padding-bottom:10px;
  word-wrap: break-word;
}

http://jsfiddle.net/D2u2K/

Answer 2

你说得对，当你在文本中有空格时它会起作用

http://jsfiddle.net/6sqPG/

Answer 3

您可以添加overflow-x属性，您的文字仍然是在框中，但如果内容超出了框的宽度，则会在其中包含滚动条。类似于你问的问题中的代码格式。

overflow-x: scroll;

保持文本框内

3 个答案: