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
not able to do max width
提问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-wrap
propertyto break-word
so 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 span
instead 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 span
element, 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>