Question

我需要两行文字在同一行。我不知道这些文本的长度。如果组合文本长度超过父级宽度，则应截断第二行文本。不应该推下文字。

普通浮动不起作用，因为它推下第二行：

<div style = "width:250px">
    <div style = "max-width:250px;float:left">
        I have priority 1
    </div>
    <div style = "float:left">
        I get what is left over
    </div>
</div>

我做了一个jsfiddle来显示它应该是什么样子：

http://jsfiddle.net/hvhRC/2/。

但是，它需要看起来像没有硬编码文本行的宽度。

Answer 1

jsFiddle demo

HTML

<div class="one-line">
    <div>this is the first line, priority</div>
    <div>this is the second</div>
</div>

CSS

.one-line {
    overflow: hidden;
    width: 300px;
    background-color: black;
    white-space: nowrap; /* forces both child divs to stay a single line */
    font-size: 0px; /* removes a small amount of whitespace between child inline-block elements */
}

.one-line > div {
    display: inline-block;
    font-size: 12pt; /* corrects font to normal size, 0px is inherited from .one-line */
}

.one-line > div:first-child {
    background-color: yellow;
}

.one-line > div:last-child {
    background-color: green;
    width: 100%; /* forces width of 2nd element to fill the rest of the space (additional width is hidden from parent's overflow property) */
}

css，在同一行保留2个元素。切割第二个元素的宽度以保持在线

1 个答案: