我在尝试对一个动态宽度的元素使用text-overflow: ellipsis
时遇到了一些问题。我已经研究了其他解决方案,但它们似乎都使用某种形式的静态宽度,而我希望实现完全动态的解决方案。Javascript是可行的选择,但如果可能,我更喜欢将其限制在CSS中。我还有一个限制,即任何解决方案都必须兼容IE8。以下是我目前的代码:
HTML代码:
<div class="container">
<div class="col-1 cell">
<h1>Title</h1>
</div>
<div class="col-2 cell">
<nav>
<ul>
<li><a href="#">Main #1</a></li>
<li><a href="#">Main #2</a></li>
<li><a href="#">Main #3</a></li>
<li><a href="#">Main #4</a></li>
<li><a href="#">Main #5</a></li>
</ul>
</nav>
</div>
<div class="col-3 cell">
<div class="foo">
<img src="http://placehold.it/50x50" alt="">
</div>
<div class="bar">
Some overly long title that should be ellipsis
</div>
<div class="baz">
v
</div>
</div>
</div>
SCSS:
.container {
border: 1px solid #ccc;
display: table;
padding: 30px 15px;
table-layout: fixed;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.col-1 {
width: 25%;
h1 {
margin: 0;
padding: 0;
}
}
.col-2 {
width: 50%;
ul {
margin: 0;
padding: 0;
}
li {
float: left;
list-style: none;
margin-right: 10px;
}
}
.col-3 {
width: 25%;
.foo {
float: left;
img {
display: block;
margin: 0;
padding: 0;
}
}
.bar {
float: left;
height: 50px;
line-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.baz {
background: #ccc;
float: left;
height: 50px;
line-height: 50px;
padding: 0 5px;
}
}
理想情况下,我希望具有类名为.bar
的元素占据.col-3
的剩余宽度。任何正确方向上的指引将不胜感激。 这里是相关的JSFiddle链接。
flex
布局。请给我一点时间来编辑。 - Josh Burgess