Question

这应该很容易，但我无法让它发挥作用。

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

我认为所有需要完成的事情（在css中）都是设置“max-width：150px;”。但是这并不是我想做的（我在IE8中进行测试）：文本在每个空格（!!）处被线条破坏并且div最终小于150px宽。（当我设置“width：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上更新）。）

Answer 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>

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

1 个答案: