Question

编辑：哇，我觉得自己像个脚跟。这很可能是有史以来在互联网上发布的最愚蠢的问题。整个问题是我试图将一个令人难以置信的长字组合成一个div，它溢出了。对不起，我浪费了大家的时间。

我对CSS完全陌生。我试图将一个简单的页面与一些列或div组合在一起。我可以很好地创建列，但是当我向它们添加文本时，文本只会溢出列/ div。如何在相应的div中包含文本？

在我研究的所有书籍/教程/网站中，这个问题从未出现过。那为什么对我来说是个问题？人们通常做了什么，这首先阻止了这个问题？

我假设浏览器一旦到达div的末尾就会将文本移动到新行。

此外，溢出：隐藏不是我正在寻找的。我不想隐藏溢出物。我想完全消除溢出。我只是希望文本在列的范围内自然流动。

我怎样才能做到这一点？我试过text-align：center和text-align：justify和word-wrap：word-break，但我觉得我不应该需要这些，而且他们不能完全给我我的意思无论如何都要。或者我需要其中一个吗？

感谢您的帮助。

编辑：这是代表性div的代码。

HTML：

<div id="left">
        <h2>Left Column</h2>
            <p>asdfasdfasdfasdfasdfasdfasdfasdf
            asdfasdfasdfasdfasdfasdfasdfasdf
            asdfasdfasdfasdfasdfasdfasdfasdf
            asdfasdfasdfasdfasdfasdfasdfasdf
            asdfasdfasdfasdfasdfasdfasdfasdf
            asdfasdfasdfasdfasdfasdfasdfasdf
            asdfasdfasdfasdfasdfasdfasdfasdf
            asdfaf</p>
</div>

CSS：

#left {
position: absolute;
left: 0px;
width: 240px;
background-color: green;
}

div包含在另一个相对的div中。

Answer 1

试试这个。

.breakWord120  
{  
   max-width: 120px !important;  
   word-break: break-all !important;  
   word-wrap: break-word !important;  
   vertical-align: top;  
   line-height: 15px;  
} 

<asp:Label ID="Label1" runat="server" CssClass="breakWord120"></asp:Label>

how to wrap text in grid's column or in label without space

编辑：

<div id="left">
        <h2>Left Column</h2>
            <p>asdfasdfasdfasdfasdfasdfasdfasdf
            asdfasdfasdfasdfasdfasdfasdfasdf
            asdfasdfasdfasdfasdfasdfasdfasdf
            asdfasdfasdfasdfasdfasdfasdfasdf
            asdfasdfasdfasdfasdfasdfasdfasdf
            asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfaf</p>
</div>
.......
.......
#left {
position: absolute;
left: 0px;
max-width: 240px !important;  
background-color: green;
word-break: break-all !important;  
word-wrap: break-word !important;  
}

Demo based on your code

文字溢出div

1 个答案: