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内部进行包装，直到达到最小宽度。然而，发生的情况是，只要文本无法在一行显示，整个div就会下降到底线。如何将div中的文本包含在div中，直到达到最小宽度？

Answer 1

inline-block div的宽度由＆＃34; shrink-to-fit＆＃34;计算，等于min(max(preferred minimum width, available width), preferred width)。在您的情况下：首选宽度是文本的宽度，可用宽度是其容器的宽度。因此，如果将容器的宽度减小到小于其首选宽度的值，则宽度将计算为其容器的宽度。加上图标的宽度，它们不能放在一行中。这就是为什么它会换成一条新线。

您可能想要为目标尝试的选择很少：

制作inline-block div inline。文本通常会扭曲到第二行。
使用display table或flex，强制文字和图标保持一行。
使用max-width: calc(100% - ??px)限制其宽度以适合容器。

Answer 2

将inline-block元素放在table-caption内，例如：

<table>
    <caption>
        <div style="display: inline-block;>
        </div>
    </caption>
</table>

在div内嵌文本内联块

2 个答案: