我正在尝试创建具有2列的CSS表(宽度100%)。第一列具有固定的宽度(例如180像素),第二列应填充其余的宽度。
在第二列内,有一个长文本(在<p>
-Tag内)。现在,我想用来text-overflow: ellipsis
将文本裁剪为一行,并且文本应与可用空间一样长。
那就是我尝试过的:
<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>
以及以下CSS代码:
// This container is just for testing
.container {
width: 400px;
margin-bottom: 10px;
}
.card {
display: table;
width: 100%;
border: 1px solid #CCC;
}
.card-i, .card-r {
display: table-cell;
vertical-align: top;
padding: 0;
border: 1px solid #CCC;
}
.card-i {
width: 180px;
}
.card-r {
position: relative;
padding: 0 15px;
}
p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
word-wrap: break-word;
}
表格格式显示基本上可以让元素根据其拥有的内容进行收缩/扩展,因此height
其width
工作方式类似于min-height
和min-width
。
table-layout:fixed;
可以强制width
这样display
为行动width
,height
将继续扩大,无论如何。
.container {
width: 400px;
margin-bottom: 10px;
}
.card {
display: table;
width: 100%;
border: 1px solid #CCC;
table-layout:fixed;
}
.card-i, .card-r {
display: table-cell;
vertical-align: top;
padding: 0;
border: 1px solid #CCC;
}
.card-i {
width: 180px;
}
.card-r {
position: relative;
padding: 0 15px;
}
p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
word-wrap: break-word;
}
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句