自動將文字包裝到新元素中的方法,無需手動或使用.js/js框架手動操作
P粉148782096
P粉148782096 2023-09-14 13:44:44
0
2
617

我想要做的是類似於Photoshop/Illustrator/其他軟體中的文本框換行,你可以寫一個段落,但是如果“溢出”,它會跳到另一個文本框中,就像填充那個文本框一樣。

如果可能的話,我希望能夠在不使用JavaScript的情況下,只使用HTML/CSS來實現這個功能,或者至少知道這是不可能的,我應該轉向其他方案。

我想要的視覺範例:https://i.stack.imgur.com/Dzbhv.jpg

我嘗試了我見過的CSS文字換行的每個屬性,也進行了Web爬取,但是我沒有看到任何類似於我想要的東西。

P粉148782096
P粉148782096

全部回覆(2)
P粉476547076

你可以設定顯示的單字數量,以防止超出盒子(經典的「閱讀更多」),但我懷疑你只能使用html/css來實現這一點。

當然,我可能錯了,但我沒有看到html或css可以根據特定條件進行通信,剪切內容並自動跳到下一個div。

P粉920835423

我在其他地方得到了一個非常接近的建議,我在這裡發布帖子,以幫助可能需要的其他人,似乎沒有一個自由浮動的方法,然而,column-(x)屬性似乎是最好的選擇。

在這裡可以找到一些文件:https://www.w3schools.com/css/css3_multiple_columns.asp

我實作的方式是給它一個自我描述的類別(在這種情況下是threeColumnDiv),每當我需要時都會使用它。

另一個似乎可能理想的東西是grid-row屬性(參考:https://www.w3schools.com/cssref/pr_grid-row.php)。

如果還有其他需要的東西,似乎你將不得不以自訂的方式來做,但我覺得這些邊緣情況很少,不應該是個大問題。

感謝大家在這個問題上的回應和幫助!

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板