12

私は簡単なセットアップをしています。divtitle と titleOptions を含む です。

タイトルが長い場合がありellipsis、完全なタイトルを表示するのではなく、タイトルの右側は titleOptions です。これらは異なる場合があります。削除、編集、移動することもあれば、それらのいくつかを削除することもあれば、何もしないこともあります。(したがって、titleOptions が異なるため、タイトルの幅を固定することはできません)。

title と titleOptions を常に 1 行にする方法を教えてください。これまでにラップしたり、titleOptions を下にプッシュしたりしたくありません。

titleOptions の幅は流動的であることを好みます。これにより、より長いタイトルがより多くのスペースを持つことができるようになるからです。

より良い説明のためのフィドルがあります： http://jsfiddle.net/K8s3Z/1

4

5 に答える 5

10

フレックスボックスを使用できます。

.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;
}

フィドル（必要な他の構文や接頭辞などもあります）。

フレックスボックスが利用できない場合は JS を使用

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 を使用したくない場合に、(Modernizr に基づく) フレックスボックスをチェックするためのカスタム関数があります。Modernizrそれらの応答をフィドルのローカル オブジェクトに割り当てるだけです。また、嫌悪感がある場合に備えて、jQueryもありません。どちらも使用している場合は、ここで簡単に交換できます。

于 2013-08-06T20:29:57.543 に答える
9

省略記号を表示するには、 css text-overflowを使用できます。AFAIKですが、オーバーフローがどこで発生するかを認識できるように、コンテナに幅を与える必要があります。

この CSS プロパティは、オーバーフローの発生を強制しません。そのようにして text-overflow を適用するには、作成者はオーバーフローを非表示に設定するなど、いくつかの追加プロパティを要素に適用する必要があります。

DOM がロードされた後に、.titleOptions の幅に基づいて .title の幅を動的に設定するために、いくつかの JavaScript コードを実行できます。

これは、あなたがやろうとしていることの静的な例です:

.title {
    float:left;
    border: 1px solid #DDD;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 76%;
}

js を使用して幅を動的に設定してみてください。

編集: これは、javascript (および小さな jQuery) を使用して幅を動的に設定する方法の例です。上記の css を使用して.title( を除くwidth: 76%;)、この js を追加しました。

function getChildByClassName(ele, className) {
    for(var i = 0; i < ele.childNodes.length; i++) {
        if($(ele.childNodes[i]).hasClass(className)) {
            return ele.childNodes[i];
        }
    }
}

var titleBars = document.getElementsByClassName('titleBar');
var w = 0;
var spacer = 10;

for(var i = 0; i < titleBars.length; i++) {
    w = titleBars[i].clientWidth;
    w = w - getChildByClassName(titleBars[i], 'titleOptions').clientWidth - spacer;
    $(titleBars[i]).children('.title').eq(0).css('width', w + 'px');
}

http://jsfiddle.net/K8s3Z/8/

于 2013-07-31T20:31:41.993 に答える
1

コンテナのdivの幅を自動にするだけです

于 2013-08-13T11:31:05.530 に答える