テキストに省略記号が付いたインライン要素

Question

このHTMLは、要素幅を要素に合わせることができない場合、要素のインライン化を行い、タイトルテキストに省略記号を付けようとしているところです。

質問： タイトルテキストの要素をインラインおよび省略記号にするにはどうすればよいですか？

十分に広いページのレイアウトは次のようになります（「i」がクリック可能なアイコンがあると真ん中がテキストである場合）ページ幅が応答しに狭すぎると

+---+----------------------+---+ 
| i | Title text   | i | 
+---+----------------------+---+ 

要素が含まれている、私はタイトルが省略記号を持っていると、結果は次のようになりたい：

+---+--------------+---+ 
| i | Title t... | i | 
+---+--------------+---+ 

アイコンがまだ表示されていると何が新しい行に折り返さないように。

現在のところ、それはラップとテキストは、このような省略記号を持っています

+---+ 
| i | 
+---+--------+ 
| Title t... | 
+---+--------+ 
| i | 
+---+ 

コードが見える-XSクラスはdisplay: blockを持っていることを、この

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

 
    .visible-xs { 
 
     display: block; 
 
    }

<div class="col-md-6"> 
 
     <a class="visible-xs"> 
 
      <i class="fa fa-indent"></i> 
 
     </a> 
 
     <div class="ellipsis"> 
 
      Title text 
 
     </div> 
 
     <a> 
 
      <i class="fa fa-pencil"></i> 
 
     </a> 
 
    </div>

ノートのように見えますページが十分に広い場合、要素を削除するにはこのクラスが必要です。それは応答性に優れているからです。

Answer 1

flexbox場合はオプションだけでcol-md-6要素にこれを追加している：

.myclass { 
    display: flex; 
    /* justify-content: space-between; */ 
    justify-content: flex-start; /* EDIT */ 
} 

乾杯！

.ellipsis{ 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
.visible-xs { 
 
    display: block; 
 
} 
 

 
.myclass { 
 
    display: flex; 
 
    /* justify-content: space-between; */ 
 
    justify-content: flex-start; /* EDIT */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> 
 

 
<div class="col-md-6 myclass"> 
 
    <a class="visible-xs"> 
 
    <i class="fa fa-indent"></i> 
 
    </a> 
 
    <div class="ellipsis"> 
 
    Title text 
 
    </div> 
 
    <a> 
 
    <i class="fa fa-pencil"></i> 
 
    </a> 
 
</div>

Answer 2

text-overflow: ellipsis;が動作するには、最大幅または幅を指定する必要があります。

DEMO：

http://plnkr.co/edit/RHYtvupwLJZ7L4eCSib1?p=preview

.ellipsis { 
    width: 100px; 
    margin: 0 10px; 
} 

.ellipsis span { 
    white-space: nowrap; 
    overflow: hidden; 
    max-width: 50px; 
    text-overflow: ellipsis; 
} 

.visible-xs { 
    display: block; 
} 

a, div { 
    float: left; 
} 

<div class="col-md-6"> 
    <a class="visible-xs"> 
     ji 
    </a> 
    <div class="ellipsis"> 
     <span>Title text</span> 
    </div> 
    <a> 
     hi 
    </a> 
</div>