Html 动态宽度元素上的文本溢出省略号
我在尝试使Html 动态宽度元素上的文本溢出省略号,html,css,overflow,Html,Css,Overflow,我在尝试使文本溢出:省略号处理具有动态宽度的元素时遇到一些问题。我已经研究过其他的解决方案,但它们似乎都使用了某种形式的静态宽度,而我希望实现一个完全动态的解决方案。Javascript是一个选项,但如果可能的话,更愿意将其保留为CSS。我还有一个约束,即任何解决方案都必须兼容IE8。以下是我到目前为止的情况 HTML: <div class="container"> <div class="col-1 cell">
文本溢出:省略号处理具有动态宽度的元素时遇到一些问题。我已经研究过其他的解决方案,但它们似乎都使用了某种形式的静态宽度,而我希望实现一个完全动态的解决方案。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>
理想情况下,我希望.bar
类的元素占据.col-3
的剩余宽度。任何朝正确方向的轻推都将不胜感激。这里还有一个指向a的链接。只需将最大宽度:100%
添加到元素中,即可实现您的目标。您需要某种宽度设置的原因是元素将继续扩展,直到您告诉它不能
这里有一个
.bar {
float: left;
height: 50px;
line-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* new css */
max-width: 100%;
}
编辑–Flexbox版
这里有一个flexbox显示屏。您需要使用如下库为IE8填充垫片:
以下是针对不那么糟糕的浏览器的修复:
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;
}
}
刚刚意识到您可能需要一个flex
显示器。给我一点时间编辑。我做了一些修改,但这使我达到了我需要的地方。谢谢
.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;
}
}