css 結びつけ divの幅が変わる場合がありますが、divが折り返さないようにするにはどうすればよいですか。



html css 結びつけ (4)

簡単な設定です。 titleとtitleOptionsを含むdiv

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

どのように私は常にtitleとtitleOptionsのための1行を持っていますか。 私はそれが今までにラップしたり、以下のtitleOptionsをプッシュしたくはありません。

titleOptionsの幅は流動的であることをお勧めします。それは、より長いタイトルにもっと多くの不動産を持たせることができるからです。

これがより良い説明のためのフィドルです: http://jsfiddle.net/K8s3Z/1 : http://jsfiddle.net/K8s3Z/1


Answer #1

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


Answer #2

あなたは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 (これには他にも必要な構文やプレフィックスなどがあります)。

flexboxが利用できない場合は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を使用したくない場合(何らかの理由で)、フィドルにはflexbox(Modernizrベース)をチェックするためのカスタム関数があります。 それらの応答をフィドル内のローカルオブジェクトModernizrに割り当てるだけです。 また、あなたがそれに嫌悪感を抱いている場合に備えて、jQueryはありません。 あなたがそれらを使用しているなら、両方ともここで置き換えるのは簡単です。


Answer #3

省略符号を表示するには、 css text-overflowを使用します 。 残念ながら、オーバーフローが発生する場所を認識できるように、コンテナーの幅を指定する必要があります。

このCSSプロパティは、強制的にオーバーフローが発生することはありません。 そうして、テキストオーバーフローを適用するには、作成者は、エレメントにオーバーフローを非表示に設定するなど、いくつかの追加のプロパティを適用する必要があります。

DOMのロード後にJavaScriptコードを実行して、.titleOptionsの幅に基づいて.titleの幅を動的に設定できます。

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

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

動的に幅を設定するためにjsを使ってみてください。

編集:これは、javascript(およびちょっとしたjQuery)を使って動的に幅を設定する方法の例です。 上記の.titleにCSSを使用して(マイナス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/


Answer #4

これはpositionを使用するオプションです( CSSのみ&すべてのブラウザでサポートされ ています - ボックスシャドーを除く )。さらにテキストをうまくブレンドできます。

Fiddle

.titleBar {
    width:980px;
    overflow:hidden;
    border: 1px solid #EEE;
    margin-bottom:2em;
    position: relative;
}

.title {
    float:left;
    border: 1px solid #DDD;

    overflow:hidden;
    white-space:nowrap;
}

.titleOptions {
    border: 1px solid #DDD;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #fff;

    /* optional... make it blend in instead of ellipsis */
    -moz-box-shadow:    2px 0 25px 50px #fff;
    -webkit-box-shadow: 2px 0 25px 50px #fff;
    box-shadow:         2px 0 25px 50px #fff;     
}

ブレンディングのスクリーンショット





html