我有一个简单的设置.一个包含标题和titleOptions的div.
标题有时很长,我希望它有一个省略号,而不是显示完整的标题.标题右边是titleOptions.这些可以有所不同.有时删除,编辑和移动,有时候几个,有时候没有. (标题宽度因此不能修正,因为titleOptions有所不同).
我如何一直有一行的标题和titleOptions.我不想要它永远包装,或者推动下面的titleOptions.
我喜欢titleOptions宽度是流畅的,因为这将允许更长的标题拥有更多的房地产.
这是一个更好的解释的小提琴：
http://jsfiddle.net/K8s3Z/1
解决方法
你可以使用
flexbox.
.titleBar {
width:980px;
overflow:hidden;
border: 1px solid #EEE;
margin-bottom:2em;
display: -webkit-flex;
}
.title {
border: 1px solid #DDD;
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-flex: 1;
}
.titleOptions {
white-space:nowrap;
border: 1px solid #DDD;
}
fiddle(也需要其他语法和前缀等).
With JS if flexbox is not available
function getByClassName(collection,className) {
var i = collection.length;
var regexp = new RegExp('\\b' + className + '\\b');
var returnSet = [];
while ( i-- ) {
if ( collection[i].className.match(regexp) ) {
returnSet.push(collection[i]);
}
}
return returnSet;
}
if ( ! Modernizr.flexBox && ! Modernizr.flexBoxlegacy ) {
var bars = document.querySelectorAll('.titleBar');
for (var i = 0,l = bars.length; i < l; ++i) {
var bar = bars[i];
var divs = bar.getElementsByTagName('*');
var optWidth = getByClassName(divs,'titleOptions')[0].offsetWidth;
getByClassName(divs,'title')[0].style.width = bar.offsetWidth - optWidth + 'px';
}
}
如果您不想使用Modernizr(由于某种原因),小提琴有自定义功能用于检查flexBox(基于Modernizr).只需将这些回应分配给小提琴中的当地对象Modernizr.另外,没有jQuery,以防你也厌恶.如果您使用它们,这两者都很容易替代.
