在HTML中定义div的宽度（设置最大宽度）

这应该是如此简单，但我无法让它工作。在HTML中定义div的宽度（设置最大宽度）

我有一个div，将包含谷歌地图上的一种工具提示（google.maps.OverlayView的实现）。要显示的文本量是可变的。它可以是单个（短）字或几个句子。 div的宽度最多应该是150px。如果整个文本需要小于150px来显示（在一行上），则div应该只根据需要尽可能小（即宽）。较长的文本应该分成几行，div最多为150px。

我认为所有需要做的事情（在CSS中）将设置“max-width：150px;”。但是这并没有达到我想要的效果（我在IE8中测试）：文本在每个空白区域（!!）都会被破线，div的宽度小于150px。（当我设置“宽度：150px;”当文字很短时，div比我想要的宽。）

为什么文本（当更长）不能填充最大宽度，？（使用文字换行或文字换行的“四处游逛”并没有帮助。）

是否可以这样说：如果文本适合一行，请保持div尽可能窄，否则，不要使它宽度超过150像素？

任何帮助将不胜感激。

编辑

感谢您的答案/评论，但我的问题仍然存在。

我的CSS，unspectacularyl，看起来是这样的：

.TTWayPoint { max-width: 150px; border: 1px solid black; padding: 3px; background-color: lightyellow; font: 8pt Verdana, Tahoma, "Microsoft Sans Serif", sans-serif; }

的问题是，较长的文本得到打破在每一个空白（换行），即没有填充最大宽度。使用显示属性并没有帮助。

在我看来，这是一个IE8问题。（我实际上正在开发一个具有Web浏览器控件的VB.NET应用程序; AFAIK，这意味着你正在使用系统上安装的IE版本，在我的情况下是IE8（不能在XP上更新）。）

来源

2013-05-17 user2395654

我有点惊讶自己的第二个（发布一个错误的答案第一），但你的使用情况正常工作，这表现在[这个小提琴（HTTP： //jsfiddle.net/Curry/MXcuh/）。你的代码必须有其他问题。 –

您可以通过将div设置为display: table或display: inline-block;来完成此操作。下面是与display: table一个例子：

http://codepen.io/anon/pen/nlhLp

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

div {background: #e7e7e7; display: table; max-width: 130px; padding: 10px; margin: 0 auto 40px;} 

</style> 

</head> 
<body> 

<div>Some text</div> 

<div>Some text some text some text some text</div> 

</body> 
</html>

来源

2013-05-17 23:37:24

在HTML中定义div的宽度（设置最大宽度）

回答

相关问题