1

我有一种情况，我的布局类似于以下小提琴：

<div>
    <span style="float:left;">This is a longer text that could potentially split into more than one line.</span>
    <span style="float:right;">Force this text into one line.</span>
</div>

jsfiddle 演示。

我想要完成的是正确的跨度调整大小，使其尽可能小，但将其内容放在一行中。左侧跨度应该调整到主 div 大小的其余部分，并且可以根据需要将文本分成任意多的行。

限制：

  • 两个跨度的内容都是可变的。左边的可能是无限的，右边的永远不会超过大约 30% 的屏幕。
  • 我真的很想要一个纯 css/html 解决方案。使用 Javascript 我知道该怎么做，但它会使维护变得更加困难，因此我正在探索更清洁的东西。
  • 左侧跨度的第一行应始终与右侧跨度的第一行位于同一行。

我怎样才能做到这一点？

4

4 回答 4

3

方法#1

如果您不想指定显式width，则可以使用display: table;跨度left：

.left {
    display: table;
    background-color: orange; /*Just for demo */
}

.right {
    float: right;
    white-space: nowrap;
    background-color: gold; /*Just for demo */
}

JSFiddle 演示。

方法#2

此外，您可以将左侧显示span为块级元素并隐藏水平溢出，overflow-x: hidden;如下所示：

.left {
    display: block;
    overflow-x: hidden;
}

更新了演示。

于 2013-08-13T11:03:50.197 回答
0

将width属性应用于两个跨度

<span style="float:left; width:50%;">This is a longer text that could potentially split into more than one line.</span>
<span style="float:right; width:50%;">Force this text into one line.</span>

或者看这里http://jsfiddle.net/pE2c8/4/，就可以理解了。

于 2013-08-13T10:40:54.417 回答
0

一种简单的方法是在 HTML 中切换 2 个跨度。将宽度 100% 添加到应该分解的跨度，并向右浮动到全宽跨度。

HTML

<html>
    <div>
         <span style="float:right;">Force this text into one line.asdsadsadasdsasadsad asd</span>
        <span style="width:100%;">This is a longer text that could potentially split into more than one line. </span>

    </div>
</html>

小提琴

http://jsfiddle.net/pE2c8/6/

于 2013-08-13T10:45:05.513 回答
0

我认为如果不为两个跨度指定至少某种宽度属性，您就无法实现这一目标，因为您需要某种方式来说明第一个容器应该在哪里断线。在这种情况下，您知道第二个容器不会占用超过 30% 的空间可能会很有用。

小提琴

通过使用max-width：

.left {
    float: left;
    max-width: 70%;
}
.right {
    float: right;
    max-width: 30%;
    /* Can add the following for good measure
       (will keep on one line even if over 30% wide
       and hides the excess) */
    white-space: nowrap;
    overflow: hidden;
}
于 2013-08-13T10:50:11.237 回答