CSS 不能做最大宽度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2511272/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:48:38  来源:igfitidea点击:

not able to do max width

css

提问by Pradyut Bhattacharya

I have a page which has a content like this...

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

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

How do i apply a max-width on it . I m using this code in the css

我如何对其应用最大宽度。我在 css 中使用此代码

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

but i m not getting the results in firefox... http://pradyut.dyndns.org/WebApplicationSecurity/width.jsp

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

Are there any JavaScript solutions?
Any help
thanks
Pradyut

有没有 JavaScript 解决方案?
任何帮助
感谢
Pradyut

采纳答案by kafuchau

So, in your CSS, you can set the word-wrappropertyto break-wordso that your string of text (w/ no whitespace) will be made to fit into the max-width:

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

E.g.

例如

<style type="text/css">

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

</style>

回答by AxelEckenberger

Well the reason why you not getting the expected result on the page you provided by the link is that you are using a spaninstead of a div.

好吧,您在链接提供的页面上没有获得预期结果的原因是您使用span的是div.

Add

添加

display: block;

to you style.

你的风格。

回答by ekerner

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

You may like to remove display: inline-block;depending on the context of your element.

您可能希望display: inline-block;根据元素的上下文进行删除。

回答by Andy E

If you used your own example you would find that it works just fine. The page you linked to uses a spanelement, which is an inline element by default. Inline elements cannot have width or height. If you want to set max width on a span element, set it's display to block or inline-block:

如果您使用自己的示例,您会发现它运行良好。您链接到的页面使用了一个span元素,默认情况下该元素是内联元素。内联元素不能有宽度或高度。如果要在 span 元素上设置最大宽度,请将其显示设置为块或内联块:

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