我有以下 html,它也绑定(bind)到 Bootstrap 弹出窗口(如果有任何区别)
<div class="event" style="top: 0%; width: 100%;">
<span class="test">Layouts</span>
<div class="value">
test
</div>
<span class="test">Starts</span>
<div class="value">2014/12/12, 11:00</div>
<span class="test">Ends</span>
<div class="value">2015/1/16, 00:00</div>
</div>
与关联的 scss:
& > div.event {
// position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: rgba(41, 128, 185,.7);
outline: 1px solid rgba(155, 89, 182,1.0);
min-height: 30px;
color: white;
// width: 100%;
height: 30px;
padding: 5px;
z-index: 1;
font-size: 0.7em;
.test {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
float:left;
// text-transform: uppercase;
font-weight: 200;
padding: 0;
}
.value {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
float:left;
color: rgba(255,255,255,0.5);
margin-bottom: 5px;
i.fa-external-link {
cursor: pointer;
line-height: 23px;
}
}
.value, .test {
padding-right: 5px;
}
我的问题是,当我缩小“.event”容器(比如说 5%)时,文本会被 chop ,我想将其显示为省略号。根据我所读到的内容,关键实际上是使用空白:nowrap 以及文本溢出集来 overflow hidden :隐藏。我反复尝试,将它们移动到不同的元素,但似乎没有任何效果。我在做一些明显错误的事情吗?如果问题似乎出在更高级别,我可以发布更多 html 和 css。
fiddle 显示问题: http://jsfiddle.net/q1go1471/2/
最佳答案
据我所知,您必须指定一个宽度才能使 text-overflow: ellipsis
起作用。
只需修改它就可以了:
.value, .test {
padding-right: 5px;
width: 30px;
}
JSFiddle:http://jsfiddle.net/Ljo2eco9/
编辑:
要在最后仅创建 1 个省略号,请在子级中使用 display: inline;
而不是 float: left
。
.test {
font-weight: 200;
padding: 0;
}
.value {
color: rgba(255,255,255,0.5);
margin-bottom: 5px;
}
.value, .test {
padding-right: 5px;
display: inline;
}
JSFiddle:http://jsfiddle.net/Ljo2eco9/1/
关于javascript - 带有子级 div 的省略号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28114328/