パネルを縮小して画面を縮小します。内側のパネルに 'pre' htmlタグ付きの単語がある場合

Question

私はこのタイプのangularJSアプリケーションを持っています。 私はブラウザのウィンドウを縮小すると、（20 charのような）非常に長い単語を含むパネルを減らします。これは、 'pre' htmlタグを持つコードを使って行を分割しません。ある時点で、パネルからの単語「エスケープ」とその効果は非常に醜いです。私の言葉が新しい行を始めるべきではなく、その言葉がパネルから逃れるのを避けてはならないということをパネルに通知する方法はありますか？ ありがとうございます。

休憩長い単語のためのHTML5のWBRタグを試してみてください

<div class="panel-body" uib-collapse="isCollapsedHeader"> 
      <div class="row"> 
       <label class="col-lg-2 label-margin"> Data riferimento </label> 
       <div class="col-lg-1 right-col-margin">{{fondo.dataRif}}</div> 
       <label class="col-lg-2 label-margin"> Chiave IB </label> 
       <div class="col-lg-7 i9fontPre right-col-margin">{{fondo.chiave}}</div> 
      </div> 
</div> 

と私のCSS

.i9fontPre { 
    white-space:pre; 
    font-size: 14px; 
    font-family:"Times New Roman", Georgia, Serif; 
} 

.row label.label-margin { 
    margin: 0px 0px 1px 0px !important; 
} 

.row .right-col-margin{ 
    margin: 0px 0px 8px 0px !important; 
} 

Answer 1

のリンクの下に確認してください。ここでは実施例である：

#box { 
 
    display: inline-block; 
 
    width: 250px; 
 
    height: 250px; 
 
    border: 2px solid blue; 
 
    border-radius: 4px; 
 
    word-wrap: break-word; 
 
}

<div id="box"> 
 
    <pre> 
 
    Reeeeeaaaaaaaaaaaaaalllyyyylongword 
 
    </pre> 
 
</div>

あなたは<pre>またはそのコンテナ要素のいずれかにword-wrapを適用することができます。

Answer 2

私のコードです。

例：

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery**<wbr>**longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p> 

Plzをあなたはそれを分割するword-wrap: break-word;を使用することができソリューション

https://jsfiddle.net/1pwmnq3L/

Answer 3

私はcss3の省略記号のプロパティからあなたのテキストを隠すのあなたの質問にコメントしました。以下のリンクをご確認ください。あなたは `オーバーフローを使用することができます

div{ width:120px; overflow:hidden; text-overflow:ellipsis;}

<div> 
 
    logggggggggggggggggggggggggggggworddddddddddddddd 
 
</div>