-1

我创建了一个简单的页面，其中包含一个包含文本的 div，问题是在 IE 中运行时它消耗第二行，而在 Firefox 或 Chrome 中运行时它适合单行。

有没有办法纠正这个问题，或者你有没有看到我做错了什么风格？如果不是，请解释为什么会这样。

以下是html和样式

<div class="Footer">
Hi my name is Mutahar, This message was sent from Superman Computer Systems located at 1705 From, Markham, ON.


            * {
            color: #101010;
            font-family: tahoma;
            font-size: 12pt;
        }
        .Footer {
            color: #404040;
            font-family: tahoma;
            font-size: 10pt;
            padding: 20px;
            text-align: left;
            width: 700px;
        }
4

2 回答 2

2

您可以使用 CSS 显式设置许多您可能需要考虑的事情。

首先，正如 VegDork 所说，您可以使用：

line-height: 14px;

但是，正如 Paddyd 所说，如果屏幕尺寸发生变化并且无法容纳在一行上怎么办？也许您的浏览器处理此问题的默认方式不是您想要的。

你可以试试：

text-overflow: ellipsis;

如果您希望三个点显示文本截断的位置（将隐藏一行文本，其中内容会溢出父元素并在末尾显示三个点 (...)）。

或者，用于块元素：

overflow: hidden;

只是隐藏内容。

您也可以做其他事情，例如强制不换行，当与overflowor结合使用时text-overflow，可以强制您可能希望以某些方式处理当元素的文本溢出时发生的情况。

white-space: nowrap;

我知道您可能希望这条线始终适合所有浏览器，但实际上，它并不是那么简单。如果我作为用户将窗口缩小到普通便笺的大小怎么办？当然，我不希望它非常清晰，但是，您的网页在这些大小限制下的行为方式可以（尽管有点费力）完全可定制，并且许多效果取决于您如何设置元素的宽度和高度（例如，使用 px 或百分比）。我的建议是抓住其他专业网站并开始调整窗口大小，看看他们是如何处理的。

但是，话虽如此，但要知道，当您最终放弃尝试使每个用户的所有内容看起来都完全相同时，这是非常令人耳目一新的，因为这是无法实现的。而是尝试使用 CSS 来控制您的元素（或其中的文本节点）在某些情况下的行为方式（例如，如果我将<div>网站的主包装 ( ，保持相同的宽度，元素的溢出部分只是隐藏起来，但是，如果我使用一些东西，比如 80%，你可以在缩小窗口宽度时看到元素调整大小）。

于 2013-08-12T16:23:07.410 回答
1

尝试为 div 显式设置 line-height。

line-height: 14px;
于 2013-08-12T16:04:21.977 回答