问题描述
我使用有序列表 (ol) 作为此 flexBox 布局的基础。但是包装并不是一下子就配合起来了。也许 squarespace 弄乱了有序列表的默认属性。无论哪种方式，文本都拒绝在 ol li ol li 元素内换行，它看起来像这样：
这是我使用的 CSS：
.ProductItem-details-excerpt ol {list-style:none;
padding-left:0vw; padding-right:0vw; padding-bottom:0vw !important;
background-color:white; text-align-last:center;
margin-left:1.85vw !important; margin-right:1.85vw !important;
display: flex; flex-wrap: wrap; justify-content: space-between;
border-radius:15px;}
.ProductItem-details-excerpt ol li {
flex-grow: 1;
white-space: Nowrap;
font-size:.8em;
display:inline-block;
position:relative !important;
margin:1px;
border:0px solid #dedede; padding:.3vw; padding-right:.6vw; padding-left:.6vw; text-align:center; background-color:#f0f0f0;}
.ProductItem-details-excerpt ol li ol{
margin-top:.2vw !important; margin-right:-.6vw !important; margin-left:-.6vw !important; margin-bottom:-.3vw !important;
border-radius:0px !important; display: flex; flex-wrap: wrap !important; }
.ProductItem-details-excerpt ol li ol li{font-size:.9em !important; max-width:100%;}
如何让文本和 flexBox 子元素正确换行？
这是 HTML。我无法控制它，因为它是正方形空间：
<ol data-rte-list="default">
<li><p class=""><strong>PICTURE</strong></p>
<ol data-rte-list="default">
<li><p class=""><strong>display Type</strong></p><p class="">Real 4K display</p></li>
<li><p class=""><strong>display Resolution</strong></p><p class="">4K Ultra HD (3840 x 2160)</p></li>
<li><p class=""><strong>Backlight Type</strong></p><p class="">Direct</p></li>
<li><p class=""><strong>Picture Processor</strong></p><p class="">Quad Core Processor 4K</p></li>
<li><p class=""><strong>Refresh Rate</strong></p><p class="">TruMotion 120 (Native 60Hz)</p></li>
<li><p class=""><strong>High Dynamic Range</strong></p><p class="">Active HDR (HDR10,HLG),HDR Dynamic Tone Mapping</p></li>
<li><p class=""><strong>Clarity</strong></p><p class="">Double Step Noise Reduction,Sharpness Enhancer</p></li>
<li><p class=""><strong>Color</strong></p><p class="">Advanced Color Enhancer,True Color Accurary</p></li>
<li><p class=""><strong>Resolution Upscaler</strong></p><p class="">4K Upscaler</p></li>
</ol></li>
<li><p class=""><strong>GAMING</strong></p>
<ol data-rte-list="default">
<li><p class=""><strong>Auto Low Latency Mode</strong></p><p class="">Yes</p></li>
<li><p class=""><strong>HgiG</strong></p><p class="">Yes</p></li>
</ol></li>
<li><p class=""><strong>AI TV</strong></p>
<ol data-rte-list="default">
<li><p class=""><strong>LG ThinQ® AI</strong></p><p class="">Yes</p></li>
<li><p class=""><strong>Google</strong></p><p class="">Google Assistant Built-in "Works with" Google Assistant</p></li>
<li><p class=""><strong>Alexa</strong></p><p class="">Alexa Built-in "Works with" Alexa</p></li>
<li><p class=""><strong>Apple</strong></p><p class="">Apple Airplay 2,Apple Homekit</p></li>
<li><p class=""><strong>Intelligent Voice Recognition</strong></p><p class="">Yes</p></li>
<li><p class=""><strong>Home Dashboard</strong></p><p class="">Yes</p></li>
</ol></li>
<li><p class=""><strong>SMART TV</strong></p>
<ol data-rte-list="default">
<li><p class=""><strong>Operating System</strong></p><p class="">webOS</p></li>
<li><p class=""><strong>Magic Remote Control</strong></p><p class="">Yes (Point,Click,Scroll,Voice)</p></li>
<li><p class=""><strong>Universal Remote Control</strong></p><p class="">Yes (Auto Device Detection)</p></li>
<li><p class=""><strong>LG Channels</strong></p><p class="">Yes</p></li>
<li><p class=""><strong>LG Content Store (App Store)</strong></p><p class="">Yes</p></li>
<li><p class=""><strong>Full Web browser</strong></p><p class="">Yes</p></li>
<li><p class=""><strong>Sports Alert</strong></p><p class="">Yes</p></li>
</ol></li>
<li><p class=""><strong>AUdio</strong></p>
<ol data-rte-list="default">
<li><p class=""><strong>Speaker System</strong></p><p class="">2.0 Channel</p></li>
<li><p class=""><strong>Output Power</strong></p><p class="">20W</p></li>
<li><p class=""><strong>Speaker Direction</strong></p><p class="">Down Firing</p></li>
<li><p class=""><strong>AI Sound Pro / AI Sound</strong></p><p class="">AI Sound</p></li>
<li><p class=""><strong>Surround Mode</strong></p><p class="">Ultra Surround</p></li>
<li><p class=""><strong>Audio Codec</strong></p><p class="">AC4,AC3 (Dolby Digital),EAC3,HE-AAC,AAC,MP2,MP3,PCM,WMA,apt-X (refer to manual)</p></li>
<li><p class=""><strong>Bluetooth Surround Ready</strong></p><p class="">Yes</p></li>
<li><p class=""><strong>LG Sound Sync</strong></p><p class="">Yes</p></li>
</ol></li>
<li><p class=""><strong>POWER</strong></p>
<ol data-rte-list="default">
<li><p class=""><strong>Power Supply</strong></p><p class="">AC 120V,50/60Hz</p></li>
<li><p class=""><strong>Standby Power Consumption</strong></p><p class="">Under 0.5W</p></li>
</ol></li>
<li><p class=""><strong>DIMENSIONS</strong></p>
<ol data-rte-list="default">
<li><p class=""><strong>Dimensions w/ Stand</strong></p><p class="">49"W x 30.8"H x 9.3"D</p></li>
<li><p class=""><strong>Dimensions w/o Stand</strong></p><p class="">49"W x 28.6"H x 3.4"D</p></li>
<li><p class=""><strong>Box Dimensions</strong></p><p class="">55.9"W x 32.9"H x 7.5"D</p></li>
<li><p class=""><strong>Stand Width</strong></p><p class="">44.4"</p></li>
<li><p class=""><strong>TV Weight w/ Stand</strong></p><p class="">31.7 lbs</p></li>
<li><p class=""><strong>TV Weight w/o Stand</strong></p><p class="">31.5 lbs</p></li>
<li><p class=""><strong>Packaging Weight</strong></p><p class="">43.7 lbs</p></li>
<li><p class=""><strong>VESA Mounting</strong></p><p class="">300 x 300</p></li>
</ol></li>
<li><p class=""><strong>CONNECTIVITY</strong></p>
<ol data-rte-list="default">
<li><p class=""><strong>Wi-Fi® Standard</strong></p><p class="">Wi-Fi Certified 802.11ac</p></li>
<li><p class=""><strong>Bluetooth® Support</strong></p><p class="">Version 5.0</p></li>
<li><p class=""><strong>IP Control</strong></p><p class="">Yes</p></li>
<li><p class=""><strong>HDMI-CEC (Simplink)</strong></p><p class="">Yes</p></li>
<li><p class=""><strong>TV Tuner</strong></p><p class="">ATSC,Clear QAM</p></li>
<li><p class=""><strong>Smart Phone Connectivity</strong></p><p class="">Yes</p></li>
<li><p class=""><strong>HDMI</strong></p><p class="">3</p></li>
<li><p class=""><strong>HDMI Audio Return Channel</strong></p><p class="">Yes</p></li>
<li><p class=""><strong>USB 2.0</strong></p><p class="">2</p></li>
<li><p class=""><strong>RF Connection In</strong></p><p class="">1</p></li>
<li><p class=""><strong>Composite In</strong></p><p class="">1</p></li>
<li><p class=""><strong>Ethernet In</strong></p><p class="">1</p></li>
<li><p class=""><strong>Digital Audio Output (Optical)</strong></p><p class="">1</p></li>
</ol></li>
</ol>
解决方法
好吧，事实证明 li 元素中的段落标记被设置为 whitespace:nowrap。我将其更改为正常，这似乎解决了问题。