文本換行是inline-block的

Question

我有以下的HTML

<div > 
     <div _ngcontent-c1="" style="display: inline-block;vertical-align: middle"> 
      <svg _ngcontent-c1="" xmlns:xlink="http://www.w3.org/1999/xlink" height="23px" version="1.1" viewBox="0 0 26 23" width="26px" 

xmlns="http://www.w3.org/2000/svg"> 
       <title _ngcontent-c1="">ic_report_problem_black_24px</title> 
       <desc _ngcontent-c1="">Created with Sketch.</desc> 
       <defs _ngcontent-c1=""></defs> 
       <g _ngcontent-c1="" fill="none" fill-rule="evenodd" id="Business-customer-link" stroke="none" stroke-width="1"> 
        <g _ngcontent-c1="" id="Desktop-BCP" transform="translate(-378.000000, -117.000000)"> 
         <g _ngcontent-c1="" id="ic_report_problem_black_24px" transform="translate(377.000000, 115.000000)"> 
          <polygon _ngcontent-c1="" id="Shape" points="0 0 27.8935742 0 27.8935742 27.8935742 0 27.8935742"></polygon> 
          <path _ngcontent-c1="" d="M1.16223226,24.4068775 L26.731342,24.4068775 L13.9467871,2.32446452 L1.16223226,24.4068775 Z M15.1090194,20.9201807 

L12.7845549,20.9201807 L12.7845549,18.5957162 L15.1090194,18.5957162 L15.1090194,20.9201807 Z M15.1090194,16.2712516 L12.7845549,16.2712516 L12.7845549,11.6223226 

L15.1090194,11.6223226 L15.1090194,16.2712516 Z" fill="#65E3F1" fill-rule="nonzero" id="Shape"></path> 
         </g> 
        </g> 
       </g> 
      </svg> 
     </div> 
     <div style="display: inline-block;min-width:224px"> 
      simple text that should wrap around the div instead of falling down to the bottom 
     </div> 
    </div> 

當屏幕尺寸變小我想在div內的文本開始在div裏面包裹，直到它到達MIN-寬度。然而，發生的情況是，只要文本無法顯示在一行上，整個div就會下降到底線。如何獲取div內的文本以包裝div，直到達到最小寬度？

Answer 1

inline-block div的寬度通過「縮小到適合」來計算，其等於min(max(preferred minimum width, available width), preferred width)。在你的情況：首選寬度是文本的寬度，可用寬度是其容器的寬度。因此，如果將容器的寬度減小到小於其首選寬度的值，則寬度將計算爲其容器的寬度。再加上圖標的寬度，它們不能放在一行中。這就是爲什麼它扭曲了一條新線。

有可能要嘗試爲你的目標幾個選擇：

1. 充分利用inline-block DIV inline。文本通常會扭曲到第二行。
2. 使用displaytable或flex，強制文本和圖標保持在一行。
3. 使用max-width: calc(100% - ??px)限制其寬度以適合容器。