我在尝试让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的链接。谢谢!
答案 0 :(得分:31)
只需将max-width: 100%
添加到元素中即可实现您的目标。你需要某种宽度设置的原因是元素将继续扩展,直到你告诉它不能。
这是 JSFiddle Example 。
.bar {
float: left;
height: 50px;
line-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* new css */
max-width: 100%;
}
所以,这是一个弹性箱显示器。你需要使用像这样的库来填充IE8:https://github.com/sfioritto/real-world-flexbox/tree/master/demos/flexie
这是针对不吸吮的浏览器的修复:
SCSS更新
.container {
border: 1px solid #ccc;
display: flex;
flex-direction: row;
padding: 30px 15px;
width: 100%;
}
.cell {
flex: 1 1 33%;
vertical-align: middle;
}
.col-3 {
width: 25%;
display: flex;
flex-direction: row;
.foo {
flex: 0 1 auto;
img {
display: block;
margin: 0;
padding: 0;
}
}
.bar {
height: 50px;
line-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 2 auto;
}
.baz {
background: #ccc;
height: 50px;
line-height: 50px;
padding: 0 5px;
flex: 1 1 auto;
}
}
<强> JSFiddle Example 强>