文本换行是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)限制其宽度以适合容器。