Html 文本溢出：省略号和显示表格单元格

我正在尝试创建一个包含两列的CSS表（宽度100%）。第一列具有固定宽度（例如180px），第二列应填充其余宽度

在第二列中，有一个长文本（在

-Tag中）。现在我想使用

文本溢出：省略号
将文本裁剪为一行，并且文本应该与可用空间一样长

这就是我所尝试的：

<div class="container">
    <div class="card">
        <div class="card-i">
            ABCD
        </div>
        <div class="card-r">
            <strong>Some title</strong><br>

            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>  
    </div>
</div>

问题在于
card-r
没有任何宽度约束。对于
文本溢出：省略号
要在那里工作必须在容器上设置宽度限制

不要将
card-i
设置为
display:table cell
尝试将
card-i
和
card-r
设置为
display:block
，并使用
calc
计算右div需要的宽度。那么文本溢出应该可以工作了

.card-i, .card-r {
    float: left;
    display: block;
    vertical-align: top;
    padding: 0;
    border: 1px solid #CCC;
}
.card-i {
    width: 180px;
}
.card-r {
    position: relative;
    padding: 0 15px;
    width: calc(100% - 214px);
}

表格格式显示允许基本元素根据其所包含的内容进行收缩/扩展，因此
高度和
宽度与
最小高度和
最小宽度类似

表格布局：固定
可以强制
宽度
在这样的
显示器上
充当
宽度
，
高度
无论如何都会不断扩展


.container{
宽度：400px；
边缘底部：10px；
}
.卡片{
显示：表格；
宽度：100%；
边框：1px实心#CCC；
表布局：固定；
}
.card-i、.card-r{
显示：表格单元格；
垂直对齐：顶部；
填充：0；
边框：1px实心#CCC；
}
.card-i{
宽度：180px；
}
.card-r{
位置：相对位置；
填充：0 15px；
}
p{
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
单词break：打破一切；
单词包装：打断单词；
}

ABCD
一些标题

他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”

但IE8不支持calc（好吧，这不是什么大问题），但也不支持Android 4.1、4.3，只有部分支持4.4和IE9（请参阅），非常感谢！这很简单，但我不知道桌子的布局：固定；命令！
.card-i, .card-r {
    float: left;
    display: block;
    vertical-align: top;
    padding: 0;
    border: 1px solid #CCC;
}
.card-i {
    width: 180px;
}
.card-r {
    position: relative;
    padding: 0 15px;
    width: calc(100% - 214px);
}