就我而言， 不起作用。我有一個包含反應圖示和右側數字的跨度（想想星形圖示和用戶評分）。當我將視口調整到某個斷點時，右側的數字會向下移動到一個新行，但圖示保持原位。我想這樣做，如果沒有足夠的空間讓圖示和數字一起顯示在該行上，那么它們都向下移動到一個新行，這樣圖示和數字就不會分開。
代碼類似于：
<p className={styles["key-info"]}>
<span>
{release ? release.substring(0, 4) : "Unknown Release Date"}
</span>
<span> · {rating}</span>
<span> · {formatMinutes(runtime)}</span>
<span>
{" "}
· <FaStar className={styles["star-icon"]} />
{score}
</span>
</p>
我如何確保在調整視窗大小時我的跨度保持在一起，特別是在最后一個跨度的情況下，我如何防止右側的數字（分數）跳到沒有圖示的新行，然后當視窗進一步調整大小時，圖示會跳下來嗎？我在某個應該作業的地方讀到過，但它沒有。
希望我問的很清楚。如果沒有，我很樂意澄清。我還應該提到導致內容中斷到新行的原因是容器縮小。也許這是相關的。
uj5u.com熱心網友回復：
嘗試將它們放在一個 div 下
<div class="together">
<FaStar className={styles["star-icon"]} />
{score}
</div>
然后設定
white-space:nowrap;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/387172.html
標籤：javascript html css 反应
上一篇：如何在底部放置頁腳？