如何禁用HTML元素的包裝？

我正在開發一個Ionic應用程序，並且遇到了我的標題組件問題。它的元素包裹着小尺寸的屏幕，我希望它們不要這樣做。如何禁用HTML元素的包裝？

這裏的目標：

這裏現在發生的事情：

我知道我可以一個固定的寬度設置爲標題，但我想不會。我也不想用JavaScript來計算寬度。

這裏的HTML /角/離子爲標題組件代碼：

<h1 *ngIf="backButton; else titleBackButton">{{ title }}</h1> <!-- show if backButton != true --> 
<ng-template #titleBackButton> <!-- show if backButton == true --> 
    <button ion-button round class="button-back"> 
    <ion-icon name="arrow-back"></ion-icon> 
    </button> 
    <h1 class="floated-title">{{ title }}</h1> <!-- this has been floated to the right --> 
</ng-template>

這裏是我的CSS樣式：

.button-back { 
    margin: 17px 0 0 10px; 
} 

.floated-title { 
    float: right; 
}

來源

2017-09-07 mkkekkonen

要麼在移動設備上的字體大小變小...要麼允許單詞本身中斷，要麼使用HTML代碼中的軟連字符（更多控件），要麼使用CSS屬性'overflow-wrap'和/或'hyphens '......？（這似乎是你以某種方式已經達到的其他項目已經進一步下降，所以...） – CBroe

要強制元素的任何時間排隊向上的行，永遠不會換行，請給父容器display: flex。這會自動應用flex-wrap: nowrap和flex-direction: row。

以上建議適用於純CSS。有些框架可能會設置不同的默認值。

例如，在React中，flex-direction默認爲column。

或者，您可以將white-space: nowrap應用於容器，該容器可抑制容器內的所有換行符。

來源

2017-09-07 19:10:16

如何禁用HTML元素的包裝？

回答

相關問題