ブートストラップでテキストを切り捨てる

私はこのhtmlレイアウトを持っており、ウィンドウを縮小するときにテキストを切り詰めようとしています。私はそれのためにブートストラップを使用しています。また、オーバーフローしたテキストを隠すためのCSS部分を追加しました。ブートストラップでテキストを切り捨てる

しかし、私が代わりにそのような何かを得る：

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

    <div style="clear:both;" class="firstFormDiv col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
     <label class="lbl-no-padding col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top:5px"> 
     Label 
     </label> 
     <div class="f_lookup_191361 col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <div class="ev-input-group input-group" style="width:100%;"> 
       <span class="evLabel form-control col-sm-12 col-xs-12 " title="Some Title">Long Text That Needs to be Truncated</span> 
       <span class="input-group-btn"> 
        <button type="button" style="float:right;" class="btn inp-button edit_button" data-reditcontroller="/someUrl" true=""> 
         <i class="fa fa-edit"></i> 
        </button> 
       </span> 
    </div>

出典

2017-05-17 JDoeBloke

これは実際の仕事を共有することができます –

私は恐れていません。コードはデータベースから動的に生成されるため、レイアウト全体を機能させるには複雑になります。 – JDoeBloke

私はちょうど<input/>に<span>からタグを変更し、それreadonly作りました。私のために働いた。付随的にブートストラップは<span>と一緒に行かない。私の場合は少なくとも。

出典

2017-05-17 10:57:55 JDoeBloke

<meta name="viewport" content="width=device-width, initial-scale=1">

<head> </head>にメタビューポートを使用します。

出典

2017-05-17 06:30:44 AdhershMNair

あなたのテキストが一定の幅（上限）を超える、テキストオーバーフロー適用：省略記号を

例：

.txt-overflow-ellipsis { 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space: pre; /* or nowrap*/ 
    } 

    <p class="txt-overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

出典

2017-05-17 07:21:36

ブートストラップでテキストを切り捨てる

答えて

関連する問題