不能做最大宽度

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

那么你没有在链接提供的页面上得到预期结果的原因是你使用的是a span而不是a div.

加

display: block;

你的风格.

Answer 2

因此,在CSS中,您可以将word-wrap属性设置为break-word使得您的文本字符串(没有空格)将适合最大宽度:

例如

<style type="text/css">

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

</style>

Answer 3

如果您使用自己的示例,您会发现它工作得很好.您链接到的页面使用一个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;具体取决于元素的上下文.