0

我有一个问题，即 div 在包含长词时不适合内容。它只需要最大宽度。

截屏：

http://img687.imageshack.us/img687/3253/photondf.png

我希望 div 与没有 javaScript 的内容具有相同的宽度。

HTML

<div class="div">
    <p>fkjdajfkdjfkdjfkdfjkdfjkdfjdfdjkfkjfdkdfioiewtiovvuiocuvicxvocxvuiocxvucioxbuvbhxjk
    civuiozxviopucvicvuvjcizoxvopcxvpiovxzijpvxzicovpzvjijopcvzxpvjiocvpjzvicvzpjvci.</p>
<div>

CSS

.div {
    float: left;
    background:red;
    max-width: 900px;
}
4

3 回答 3

0

究竟试图让 div 做什么？您是否希望它缩小到内容的大小但不大于 900 像素？

于 2012-11-06T23:03:54.850 回答
0

如果您不希望您的 div 大于 900 像素，请尝试width: auto;但保留。max-width

于 2012-11-06T23:05:03.587 回答
0

好吧，这里有几个问题。

  1. 里面的内容p根本没有空间。换句话说，它不能在多行上“拆分”单词。而且您的 div 实际上确实具有正确的宽度。

  2. 除非您真的不想将其拆分为多行。您可以overflow在 div 上定义为auto或hidden。在这种情况下，auto将添加滚动条并hidden简单地隐藏过去的内容。

  3. 如果overflow在p或 上div，您实际上可以在 css3 中强制换行：http: //www.w3schools.com/cssref/css3_pr_word-wrap.asp

  4. 由于您为 div 定义了宽度，因此它实际上总是使用该宽度，并且不再使用。（不要将溢出的文本算作比 div 大）。在计算布局大小和围绕此 div 的其他 div 的位置时，不应考虑溢出的文本。

顺便说一句，如果您在实际存在空格时遇到问题，那么像这样的非常长的字符串并不是一个很好的“用例”。你应该把它贴在这里而不是那个。

编辑

您的 div 不能用长词“适应”内容，它将扩展到可能的最大宽度，然后当达到最大宽度时，它将换行到另一行。如果单词大于 div 它将溢出。

编辑 2

如果你真的想这样做，有办法。但这很丑陋。您必须<br />在每个长词后添加一个。如果您在模板引擎中传递文本，您甚至可以<br />用 css 替换您的空格。但老实说，不要那样做。

于 2012-11-06T23:05:19.743 回答