如何用CSS包裝AngularJS中的文本？

這應該是一個簡單的答案，但我不明白這裏。如何用CSS包裝AngularJS中的文本？

<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這裏來降低字體大小，除非絕對必要的。理想情況下，它會包裝到下面的行。

來源

2017-09-01 GarrettJMU

要浮動，你必須將其（至少）的跨度爲'顯示：inline-block'，因爲span的默認值是'inline' –

通過這樣做，它可以擺脫...但仍然從屏幕上消除文本。 – GarrettJMU

這個工作完美。它已經從離子項目

white-space: none;

繼承了這一點，我只是需要把它添加到類跨度：

white-space: normal;

來源

2017-09-01 20:47:18 GarrettJMU

我認爲這是你需要的。

所以在下面的例子中，我嘗試模擬我認爲可能是問題。我正在使用角度過濾器limitTo來限制字符的長度，如果要更改此長度，則只需將以下代碼中的15的值更改爲所需的長度。我還添加了一些額外的代碼，請使用它或忽略它，爲佈局問題。我將父跨度設置爲position:relative;display:block，這樣它將佔用整個窗口寬度，第二個子跨度爲position:absolute;top:0px;right:0px;，以便它固定在右側，最後我將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>

來源

2017-09-01 20:36:50

我會給這個鏡頭，但我發現一個更好的修復，只需輸入這個類：白色空間：正常; – GarrettJMU

謝謝！我不確定這是否是「更好」的修復，直到我做出更多響應的事情。我仍然會試試你的！謝謝！ – GarrettJMU

如何用CSS包裝AngularJS中的文本？

回答

相關問題