divの外にあるテキストを非表示にする

Question

私は上記のデザインを作成しようとしています。これは私がこれまで達成したことですが、私は固定された高さを使用しています。

https://jsfiddle.net/iDaniel19/b0LL5wj8/1/

<div class="container"> 
<div class="row event"> 
    <div class="col-xs-3 col-sm-2 col-md-1 event-date"> 
     <h3>9</h3> 
     <h3>May</h3> 
    </div> 
    <div class="col-xs-9 col-sm-10 col-md-1 no-padding-left event-info"> 
     <div class="event-info-title"> 
      <h4>Title</h4> 
     </div> 
     <div class="event-info-tl"> 
      <div class="event-info-tl-text"> 
       <p><span class="glyphicon glyphicon-time" aria-hidden="true"></span> Time</p> 
       <p><span class="fa fa-map-marker" aria-hidden="true"></span>Post code</p> 
      </div> 
      <div class="event-info-tl-icon"> 
       <p class="event-icon"><span class="fa fa-chevron-right" aria-hidden="true"></span></p> 
       <div style="clear: both;"></div> 
      </div> 
     </div> 
    </div> 
</div> 

どのように私は、テキストが1行に残り、外部に表示されていないことを確認していますか？

など。上記の画像では、最終行（時間と場所）が携帯端末に収まらず、コンテナの外に出ることがあります。

これは画像をコードする正しい方法ですか？

Answer 1

updated fiddle

新しい行が作成されますむしろそれは小さなデバイスで中断されませんway--次でそれをやってみてください。

.body { 
 
    font-family: 'Open Sans'; 
 
} 
 

 

 

 
.no-padding-left { 
 
    padding-left:0; 
 
} 
 

 
.float-right { 
 
    float:right; 
 
} 
 
.event{ 
 
    height:70px; 
 
} 
 
.event-date { 
 
    border-right: 1px solid black; 
 
    text-align: center; 
 
} 
 

 
.event-date > h3 { 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    padding:0; 
 
    margin:0; 
 
    line-height: 34px; 
 
} 
 

 
.event-info-title { 
 
    height: 35px; 
 
} 
 

 
.event-info-title > h4{ 
 
    padding: 0 0 0 5px; 
 
    font-weight: 600; 
 
    letter-spacing: 2px; 
 
    text-transform: uppercase; 
 
    margin:0; 
 
    top:25%; 
 
    position: relative; 
 
} 
 

 
.event-info-tl { 
 
    height: 35px; 
 
    border-top: 1px solid black; 
 
} 
 
.event-info-tl > div { 
 
    display: inline-block; 
 
} 
 

 
.event-info-tl-text { 
 
    top:25%; 
 
    position: relative; 
 
} 
 

 
.event-info-tl-text > p { 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 
.event-info-tl-text > p:first-child{ 
 
    padding-left: 5px; 
 
} 
 
.event-info-tl-icon { 
 
    float:right; 
 
    margin:0; 
 
} 
 
.event-icon { 
 
    padding:5px; 
 
    font-size: 20px; 
 
    margin:0; 
 
} 
 

 
@media (max-width: 576px) { 
 
    .container { 
 
     padding:0; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div class="container"> 
 
    <div class="row event"> 
 
     <div class="col-xs-3 col-sm-2 col-md-1 event-date"> 
 
      <h3>9</h3> 
 
      <h3>May</h3> 
 
     </div> 
 
     <div class="col-xs-9 col-sm-10 col-md-1 no-padding-left event-info"> 
 
      <div class="event-info-title"> 
 
       <h4>Title</h4> 
 
      </div> 
 
      <div class="event-info-tl "> 
 
       <div class="event-info-tl-text "> 
 
       <div class="col-xs-12 col-sm-6"> 
 
       
 
       
 
        <p><span class="glyphicon glyphicon-time" aria-hidden="true"></span> Time</p> 
 
        </div> 
 
        <div class="col-xs-12 col-sm-6"> 
 
        <p><span class="fa fa-map-marker" aria-hidden="true"></span>Post code</p> 
 
        </div> 
 
       </div> 
 
       <div class="event-info-tl-icon"> 
 
        <p class="event-icon"><span class="fa fa-chevron-right" aria-hidden="true"></span></p> 
 
        <div style="clear: both;"></div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

あなたは、タイトル/時間/郵便番号のテキストの上/下のスペースを作成して、一定の高さを取り除くためにトップ/ボトムのパディングを使用することができます。右矢印を絶対に置きます。そして、破損したくない2行のテキストのために、コンテナにwhite-space: nowrapを使用してください。

.body { 
 
    font-family: 'Open Sans'; 
 
} 
 

 
.no-padding-left { 
 
    padding-left: 0!important; 
 
} 
 

 
.float-right { 
 
    float: right; 
 
} 
 

 
.event-date { 
 
    border-right: 1px solid black; 
 
    text-align: center; 
 
} 
 

 
.event-date > h3 { 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    padding: 0; 
 
    margin: 0; 
 
    line-height: 34px; 
 
} 
 

 
.event-info-title, 
 
.event-info-tl { 
 
    padding: .5em 0; 
 
} 
 

 
.event-info-title > h4 { 
 
    padding: 0 0 0 5px; 
 
    font-weight: 600; 
 
    letter-spacing: 2px; 
 
    text-transform: uppercase; 
 
    margin: 0; 
 
    top: 25%; 
 
    position: relative; 
 
} 
 

 
.event-info-tl { 
 
    border-top: 1px solid black; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.event-info-tl > div { 
 
    display: inline-block; 
 
} 
 

 
.event-info-tl-text { 
 
    top: 25%; 
 
    position: relative; 
 
    white-space: nowrap; 
 
} 
 

 
.event-info-tl-text > p { 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 

 
.event-info-tl-text > p:first-child { 
 
    padding-left: 5px; 
 
} 
 

 
.event-info-tl-icon { 
 
    position: absolute; 
 
    top: .5em; 
 
    right: 0; 
 
} 
 

 
.event-icon { 
 
    font-size: 20px; 
 
    margin: 0; 
 
} 
 

 
@media (max-width: 576px) { 
 
    .container { 
 
    padding: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<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.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row event"> 
 
     <div class="col-xs-3 col-sm-2 col-md-1 event-date"> 
 
      <h3>9</h3> 
 
      <h3>May</h3> 
 
     </div> 
 
     <div class="col-xs-9 col-sm-10 col-md-1 no-padding-left event-info"> 
 
      <div class="event-info-title"> 
 
       <h4>Title</h4> 
 
      </div> 
 
      <div class="event-info-tl"> 
 
       <div class="event-info-tl-text"> 
 
        <p><span class="glyphicon glyphicon-time" aria-hidden="true"></span> Time</p> 
 
        <p><span class="fa fa-map-marker" aria-hidden="true"></span> Post code</p> 
 
       </div> 
 
       <div class="event-info-tl-icon"> 
 
        <p class="event-icon"><span class="fa fa-chevron-right" aria-hidden="true"></span></p> 
 
        <div style="clear: both;"></div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

それは何overflowを使用して隠されたでしょうか？最後にこれらの2つのクラスを追加しました。

.event-info-tl-text{width:90%; line-height: 1.1em; height: 1.1em; overflow:hidden;white-space: nowrap;} 
.event-info-tl-icon{width:5%} 

ここにはfiddleがあります。