HTML布局具有靈活的左窗格和固定的右。 左不能換行，必須顯示省略號

Question

我需要列表中的項目是這種格式：

|Name                               |    Some other val1|
|Very very long no wrap line that...|    Some other val2|

• 右側是固定寬度。
• 左側必須填滿所有可用寬度，直到右側窗格為止。
• 必須對屏幕調整大小做出反應（這是一個移動網站，因此方向實際上發生了變化）
• 在左窗格中必須不換行文本，他們需要使用省略號（文本溢出：省略號）被切斷。

換一種方式：

| <-靈活的多行，但不環繞（使用省略號） -> | <-固定寬度-> |

我嘗試了各種浮動：左，右，溢出：隱藏和棘手的東西，沒有運氣！ 我應該只用一張桌子嗎？

Answer 1

您可以結合使用display:inline-block和vertical-align:top並刪除元素之間的空格 - 注意HTML注釋 （有關更多信息，請參見此答案 ），並使用CSS calc（） 。

HTML ：

<div class="parent">
    <div class="left">
        <p>Curabitur tristique, purus a dapibus laoreet, tellus massa tempor turpis, eget tristique turpis lorem vitae nulla. Morbi venenatis, mi vel sodales sollicitudin, quam mauris vulputate nibh, sed convallis arcu nisi sed sem. Suspendisse potenti. Cras lobortis porttitor libero, et commodo risus commodo sit amet. Etiam vitae justo ac est aliquet pharetra. Integer eu auctor mi, a molestie lacus. Morbi vel diam ut sem rutrum eleifend vel quis sapien. Phasellus vel faucibus eros, in commodo neque.</p>
    </div><!--
    --><div class="right">
    </div>
</div>

CSS ：

html,body,.parent{
    width:100%;
    height:100%;
}

.right{
    height:100%;
    width:100px;
    background:red;
    display:inline-block;
    vertical-align:top;
}

.left{
    width:calc(100% - 100px);
    height:100%;
    background:blue;
    display:inline-block;
    vertical-align:top;
}

p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

的jsfiddle

我可以使用calc（）

注意 ：我使用Eric Meyer的“ Reset CSS” 2.0

Answer 2

我過去曾嘗試完成相同的任務。

最后，我最終使用了表，它並沒有您想象的那么糟糕。

在那之前我很怕餐桌，但是現在在需要的時候我很舒服地使用餐桌。

在這種情況下，除非您願意使用javascript，否則使用table是唯一的方法。

不要害怕使用表。

Answer 3

使用text-overflow: ellipsis左窗格中的text-overflow: ellipsis

例：

<ul>
    <li>
        <div class="right">RIGHT VALUE</div>
        <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at mi faucibus, fringilla purus non, blandit nibh. Cras non volutpat augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque varius eu leo quis molestie. Sed scelerisque nisl a felis interdum, nec gravida odio condimentum. Integer tellus leo, luctus vitae gravida et, ultrices quis justo. Etiam id dignissim diam. Suspendisse mattis nec odio sit amet adipiscing. Nullam nec ornare massa. Fusce gravida enim eget tellus lobortis cursus. Curabitur venenatis dignissim nisi ut auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
    </li>
</ul>

CSS

ul li .left {
    margin-right: 100px;
    height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
ul li .right {
    float: right;
    width: 100px;
    background-color: #ccc;
}

http://jsfiddle.net/HMB8c/