我正在嘗試連續顯示 3 個 DOM 元素。第一個和第三個是divs 和常數width，height中間的一個是文本，可以增長。1和3的高度必須等于單行文本的高度。
當文本元素變長時，問題就開始了。我想在第一行文本之前顯示1，在文本結束的地方顯示3 。
兩個變化的結合幫助我實作了這一點：
- 我
flex-wrap: wrap為parentContainer
.parentContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
- 我把每一個字都包進了自己的
<span>...</span>
盡管這種方法可以正確顯示元素，但我有兩個問題
我必須自己將文本分解成單詞，而不是使用Unicode 換行演算法。不幸的是，不能保證文本有任何空格。
雙擊滑鼠僅選擇單個跨度內的文本，而不是整個文本。
我想知道是否有一種不同的方法來解決上述問題？
uj5u.com熱心網友回復：
我認為實作這一點的關鍵可能是使用 css 將圖示/div 的顯示屬性設定為inline. 您可能必須使用尺寸來獲得您想要的東西，但是將影像作為行內元素可以讓您將其視為只是另一個詞。
在這個例子中，我鏈接了一個影像來模擬你的邊界元素。
img {
width: 30px;
aspect-ratio: 1;
display: inline;
vertical-align: middle;
}<img src="https://stackoverflow.design/assets/img/logos/sf/sf-icon.svg" /> text text here text here more text here even more text here text here more text here even more text<img src="https://stackoverflow.design/assets/img/logos/sf/sf-icon.svg" />轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/462173.html
標籤：javascript css