这应该很容易，但我无法让它工作。
我有一个 div，它将在 Google map 上包含一种工具提示(google.maps.OverlayView 的实现)。要显示的文本量是可变的。它可以是一个(短)词或几个句子。 div 的宽度最多应为 150px。如果整个文本需要小于 150px 来显示(在一行上)，则 div 应该只根据需要尽可能小(即尽可能宽)。较长的文本应分成几行，div 最多 150 像素宽。
我认为(在 css 中)需要做的就是设置“max-width: 150px;”。但这并没有达到我想要的效果(我正在 IE8 中测试):文本在每个空白区域 都换行了(!!)并且 div 最终小于 150 像素宽。 (当我设置“width: 150px;”时，当文本较短时，div 变得比我想要的更宽。)
为什么文本(较长时)没有填满最大宽度，但经常被打断？ (“玩弄”word-wrap 或 text-wrap 没有帮助。)
是否可以这样说:如果文本适合一行，则让 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;
}
问题是较长的文本在每个空白处都会被打断(换行)，即不会填充最大宽度。玩 display 属性没有帮助。
在我看来，这是一个 IE8 问题。 (我实际上正在开发一个具有 Webbrowser 控件的 VB.NET 应用程序；据我所知，这意味着您正在使用系统上安装的 IE 版本，在我的例子中是 IE8(无法在 XP 上更新)。)
最佳答案
您可以通过将 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>
关于css - 在 HTML 中定义 div 的宽度(设置最大宽度)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16619024/