Question

我的网页设计要求是这样的标题：

+-------------------------------------------------------------+
| +---------------------+  +-------++------------------------+|
| | float left DIV A    |  | DIV C || float right DIV B      ||
| +---------------------+  +-------++------------------------+|
+-------------------------------------------------------------+

标题有3个部分：Div A，B，C。 DIV A向左浮动，而DIV B和C向右浮动。 DIV A和DIV B可能包含长文本。所以溢出的文本被截断为省略号。 DIV C有短文，其内容不应被截断。

我尝试制作如下HTML：

<html>
    <head>
        <style>
            .header
            {
                width: 100%;
                border: 2px red;
                overflow: hidden;
            }
            .DivA
            {
                float: left;
            }
            .DivC
            {
                float: right;
                white-space:nowrap;
            }
            .DivB
            {
                float: right;
            }
            .clear
            {
                clear: both;
            }
            .DivA, .DivB
            {
                width: 40%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="DivA">
                Hello world 1 Hello world 2 Hello world 3
                Hello world 1 Hello world 2 Hello world 3
                Hello world 1 Hello world 2 Hello world 3
            </div>
            <div class="DivB">
                Good bye Good bye
                Good bye Good bye
                Good bye Good bye
            </div>
            <div class="DivC">
                No Ellipsis
            </div>
            <div class="clear">
            </div>
        </div>
    </body>
</html>

文本溢出：省略号仅在DIV A和DIV B具有宽度时有用（在我的情况下，我将它们设置为45％）。

然而，DIV C存在一个问题。由于DIV C的宽度在不同的定位中可能不同，我们无法明确设置其宽度。缩小浏览器窗口时，可以将div C包装到下一行。这看起来很糟糕。

有没有办法让DIV A和DIV B分别左右浮动溢出省略号，同时DIV C可以适应其最佳宽度？

Answer 1

你需要做的是对div＃c应用一个余量，它与div＃a和div＃b

的宽度相匹配

以下面的例子为例;

<style>
.DivA {width:250px; float:left;}
.DivB {width:150px; float:right;}
.DivC {margin-left:260px; margin-right:160px;}
</style>

<div class="DivA" />
<div class="DivB" />
<div class="DivC" />

您会注意到我为每个宽度添加了额外的10px，这只是为了允许元素间隔更多，当然您也需要理想地清除它们。

这将为您提供两侧的两个固定列和一个占据任何可用空间的中心元素。

Answer 2

这个人已经很老了（09＆＃39;）但是对于那些像我一样来自搜索的人我会回答。

由于A和B各占40％，因此最大C将为20％，因为标题为100％。因此，为它添加max-width:20%;，C不会进入下一行。但是，当浏览器窗口变窄时，文本将在需要时换行。

如果您不想要这种行为，可以添加white-space: nowrap;，这将使C文本与B中的文本重叠。

请参阅http://jsfiddle.net/fxLVQ/

如何为“float：left”和“float：right”div制作“text-overflow：ellipsis”？

2 个答案: