2

要素の幅が動的な場合にテキストをトリミングするにはどうすればよいですか？

要素の幅が固定されている場合、テキストをトリミングすることができます。

.my-class {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

しかし、幅が動的であるときにそれを行うにはどうすればよいですか？

実際の例-タイトルが左側に浮かび、ツールバーが右側に浮かんでいるアプリケーションのヘッダー：

ここに画像の説明を入力してください

タイトルはすべて自由な場所に配置する必要がありますが、それ以上は使用しないでください。

ここに画像の説明を入力してください

このような動的なタイトルのテキストをトリミングするにはどうすればよいですか？

ライブで再生するコードhttp://cssdeck.com/labs/fbe2t2qo/0

4

3 に答える 3

3

あなたはCSSmin-widthとmax-widthプロパティを使うことができます、それはあなたのために仕事をします

.my-class {
  min-width: 100px;   <----Here
  max-width: 500px;   <----Here
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
于 2012-10-29T20:55:42.437 に答える
2

実際に実行できることが判明したため、変更は次のとおりです。

  • ツールバーを最初にhtmlに設定し、右側にフロートさせます。
  • タイトルにテキストオーバーフローを設定します。

HTML

<div class='header'>
    <div class='header-toolbar'>
        <button>Create</button>
    </div>
    <div class='header-title'>
        Very very very very very long very very very long title
    </div>

    <div class='clearfix'></div>
</div>

CSS

.header, .header-title, .header-toolbar {
    border: 1px solid black;
    margin: 3px;
    padding: 3px;
}

.header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-toolbar {
    float: right;
}

.clearfix {
    clear: both;
}

コードhttp://cssdeck.com/labs/na24g9nf/0

PS

それは私の答えではありません、それはこのスレッドhttp://www.sql.ru/forum/actualthread.aspx?tidでこの男http://www.sql.ru/forum/memberinfo.aspx?mid=114453によって答えられました= 979934

于 2012-11-09T15:19:29.200 に答える
1

フロートを使用したくない場合は、テーブルセルを使用した次のソリューションを参照してください。

このソリューションでは、CSSの「display：table」を使用して、100％流動的なテキストオーバーフローの省略記号を使用します。フロートは必要ありません！

HTML：

<div class='header'>
  <div class='header-title'>
     <div class="fluid-ellipsis-container">
        <div class="fluid-ellipsis-content">
          This solution uses 'display: table' in CSS for 100% fluid text-overflow ellipsis. <strong>NO FLOATS needed!</strong> It's important to note that this works because of the browser's process of calculating the 'table-cell' width within a fixed layout scheme of the parent 'table' div, in effect creating a "fixed" table-cell width on each browser reflow/paint, hence applying the ellipsis property without dynamic width issues.
        </div>                    
     </div>      
  </div>
  <div class='header-toolbar'>
    <button>Create</button>
  </div>
</div>

CSS：

.header, .header-title, .header-toolbar {
    box-sizing: border-box;
    border: 1px solid rgba(150,150,150,0.5);
    padding: 5px;
}
.header{
    display: table;
}
.header-title {
    display: table-cell;
    vertical-align:middle;
    width: 85%;
}
.header-toolbar {
    display: table-cell;
    width: 15%;
    text-align: center;
    vertical-align: middle;
}
.fluid-ellipsis-container{
    display:table;
    table-layout: fixed;
    width: 100%;
}
.fluid-ellipsis-content{
    display: table-cell;
    vertical-align: middle;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

これは、親の「テーブル」divの固定レイアウトスキーム内で「テーブルセル」幅を計算するブラウザのプロセスのために機能し、実際には各ブラウザのリフローでセルに「固定」幅を作成することに注意することが重要です。ペイントのサイズ変更。したがって、動的な幅の問題なしに省略記号プロパティを適用します。

http://cssdeck.com/labs/j5zk46la

于 2015-01-06T07:57:22.827 に答える