我在標題旁邊有一段。兩者都是,display:inline-block但是當通過降低解析度壓縮頁面時,整個段落都會落到下一行。我試過了wordwrapping,overflow但它們似乎沒有影響。還有什么我可以使用的嗎?下面的代碼不反映wordwrappingor overflow。

.header_class_name {
display: inline-block
}
.para_class_name {
display: inline-block
}
<h4 class="header_class_name">my title here</h4>
<p class="para_class_name">paragraph here</p>
uj5u.com熱心網友回復:
你可以display: inline;在里面使用display: inline-block;。
.header_class_name {
display: inline;
}
.para_class_name {
display: inline;
word-break: break-word;
}
<h4 class="header_class_name">my title here</h4>
<p class="para_class_name">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
uj5u.com熱心網友回復:
您可以使用 min-width 屬性,因此當視窗縮小時,布局應該保持不變。
uj5u.com熱心網友回復:
編輯- 根據您的評論添加解決方案
嘗試使用white-space: nowrap;,如果不起作用,您可以嘗試將包含的 div 大小設定為更高的width.
你可以嘗試做幾件事:
- 包裝兩個div
<nobr> - 使父 div
flexbox與flex-direction: row; flex-wrap: nowrap;此解決方案的問題是它們會“泄漏”到您的視口寬度之外,所以我會考慮允許換行/使字體更小/使用elipsis
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/414286.html
標籤:
上一篇:按鈕切換顯示顯示隱藏
