AngularJSでテキストをCSSで折り返す方法は？

Question

これは簡単な答えになるはずですが、私はここでそれを得られません。

<span ng-show="myResults !=null && !isShowDetails" class="yourScore"> 
    YOUR SCORE (best 4) : {{myResults.fullSumBest}} pts - total: {{user.userScore}} pts 
    <span style="float:right" ng-click="showDetails()"> 
    [ + ] show details 
    </span> 
</span> 

画面のサイズを変更すると、テキストがオーバーフローすることはありません。テキストとスコアがカットされます。

word-wrap: break-word; 
    overflow-wrap: break-word; 
    width: 100%; 

私が絶対に必要でない限り、フォントサイズを小さくするために、ここで@media使用しないことを好むだろう：私は私の頭の上をオフにしようとした

物事。理想的には、それは下の行に折り返されます。

Answer 1

これは完璧に働きました。これは、イオンのアイテム

white-space: none; 

からこれを継承していたと私はちょうどスパンのクラスにこれを追加する必要：

white-space: normal; 

Answer 2

私はこれがあなたが必要と考えるものです。

以下の例では、私が問題と思われるものをシミュレートしました。私は角度フィルターlimitToを使用して文字の長さを制限しています。この長さを変更する場合は、下のコードの15の値を希望の長さに変更するだけです。私はまた、いくつかの余分なコードを追加してください、それを使用するか、レイアウトの問題のためにそれを無視してください。私は親のスパンをposition:relative;display:blockに設定して、ウィンドウ全体の幅、つまりposition:absolute;top:0px;right:0px;を与えて2番目の子スパンになるようにして、右側に固定されるようにしました。最後にCSS display:block;padding-right;を最初の子スパンに追加しました。それは全幅をとり、パディングは絶対位置スパンを考慮に入れます。これで問題が解決した場合はお知らせください。

JSFiddle Demo

HTML：

<div ng-controller='MyController' ng-app="myApp"> 
    <span style="position:relative;display:block;" ng-show="myResults !=null && !isShowDetails" class="yourScore"> 
    <span style="position:relative;display:block;padding-right:120px;">{{'YOUR SCORE (best 4) : '+myResults.fullSumBest+' pts - total: '+user.userScore+' pts' | limitTo : limit}}</span> 

     <span style="position:absolute;top:0px;right:0px;" ng-init="bool = false;limit=15;" ng-click="bool=!bool;limit=bool ? 100000 : 15"> 
     {{bool ? '[ + ] hide details ' : '[ + ] show details '}} 
     </span> 
    </span> 
</div>