Question

我有一个包含这样内容的页面......

<div id="content">
testingtestingtestingtestingtestingtestingtestingtestingtesting
testingtestingtestingtestingtestingtestingtestingtesting
testingtestingtestingtestingtesting
</div>

如何在其上应用最大宽度。我在css中使用这段代码

#content {
    max-width:50px; /* for standards-compliant browsers */
   /*width:expression(document.body.clientwidth > 650? "650px": "auto" );*/ 
   /* max-width expression for IE only */
}

但是我没有在firefox中得到结果... http://pradyut.dyndns.org/WebApplicationSecurity/width.jsp

有没有JavaScript解决方案？
任何帮助
谢谢你 Pradyut

Answer 1

您没有在链接提供的页面上获得预期结果的原因是您使用的是span而不是div。

添加

display: block;

你的风格。

Answer 2

因此，在您的CSS中，您可以将word-wrap property设置为break-word，以便您的文本字符串（没有空白）将适合最大宽度：

E.g。

<style type="text/css">

#content {
    max-width: 50px;
    word-wrap: break-word;
}

</style>

Answer 3

如果您使用自己的示例，则会发现it works just fine。您链接到的页面使用span元素，默认情况下是内联元素。内联元素不能具有宽度或高度。如果要在span元素上设置最大宽度，请将其显示设置为block或inline-block：

<span id="content" style="max-width:50px; display:block;" >  
testingtestingtestingtestingtestingtestingtestingtestingtesting  
testingtestingtestingtestingtestingtestingtestingtesting  
testingtestingtestingtestingtesting  
</span>

Answer 4

#content {
    max-width: 50px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

您可能希望删除display: inline-block;，具体取决于元素的上下文。

Answer 5

在两者之间添加空格。我相信这是因为css / html将其作为一个单词读取。例如。

<span id="content" style="max-width:50px; display:block;" >  
testing testing testing testing testing testing testing testing testing  
testing testing testing testing testing testing testing testing  
testing testing testing testing testing  
</span>

不能做最大宽度

5 个答案: