Wrap Text in einem div, das ist inline-block

Question

Ich habe folgend 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> 

Wenn die Bildschirmgröße wird klein, dass ich den Text innerhalb des div will innerhalb des div starten Einwickeln, bis sie die Min- erreicht Breite. Wie dem auch sei, sobald der Text nicht in einer Zeile angezeigt werden kann, wird der gesamte Div in die untere Zeile gesetzt. Wie bekomme ich den Text innerhalb der div, um innerhalb der div zu wickeln, bis es die minimale Breite erreicht?

Answer 1

Die Breite von inline-block div wird mit "shrink-to-fit" berechnet, was min(max(preferred minimum width, available width), preferred width) entspricht. In Ihrem Fall: Die bevorzugte Breite ist die Breite Ihres Textes, die verfügbare Breite ist die Breite des Containers. Daher wird die Breite auf die Breite des Containers berechnet, wenn Sie die Breite des Containers auf einen Wert reduzieren, der kleiner als die bevorzugte Breite ist. Plus die Breite des Symbols, sie können nicht in eine Zeile passen. Deshalb hat es sich zu einer neuen Linie verzogen.

Es gibt nur wenige Entscheidungen, die Sie möchten für Ihr Ziel versuchen:

1. Machen Sie das inline-block div inline. Der Text wird normalerweise in die zweite Zeile verschoben.
2. Verwenden Sie displaytable oder flex, um den Text und das Symbol in einer Zeile zu erzwingen.
3. Verwenden Sie max-width: calc(100% - ??px) begrenzen Sie seine Breite, um den Behälter zu passen.