0

这应该很容易，但我就是无法让它工作。

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

我认为所有需要做的（在css中）就是设置“max-width：150px;”。但这并没有达到我想要的效果（我在 IE8 中进行测试）：文本在每个空白处都被换行（！！），并且 div 最终小于 150px 宽。（当我设置“宽度：150px”时，当文本很短时，div 变得比我想要的更宽。）

为什么文本（当更长的时候）没有填满最大宽度，而是经常被打破？（使用自动换行或文本换行“玩弄”没有帮助。）

是否可以说：如果文本适合一行，则保持 div 尽可能窄，否则，不要使其宽于 150px？

任何帮助将非常感激。

编辑

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

我的 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 问题。（我实际上正在开发一个具有 Webbrowser 控件的 VB.NET 应用程序；AFAIK 这意味着您正在使用系统上安装的 IE 版本，在我的情况下是 IE8（不能在 XP 上更新）。）

4

1 回答 1

1

您可以通过将 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-17T23:37:24.473 回答