CSS div content adaptive wrap

Copyright: Should reprint, please contact the author. https://blog.csdn.net/ZYD45/article/details/89234075

phenomenon

As shown, the adaptive line width div, the average width of the two originally div, wherein since a single line of text exceeds the interior, resulting in longer width.

Solution

Use table layout elements within div fit its layout. To set the table-layout not only on table, but also inherit the parent's width width settings

 <div> <!-- 自适应的div-->
        <table style="table-layout:fixed;width: -webkit-fill-available;">
            <tr>
                <td>需要换行的文字</td>
            </tr>
        </table>
    </div>