javascript - 文本不会包裹在我的 flexbox 容器中

Question

我在尝试将文本放入我的 flexbox 容器时遇到问题，它只是溢出到右边的元素中，我怎样才能让两个文本都换行？

<div style="width:100%; height:auto; display:flex; outline:1px solid red;">
  <div style="width:30%; min-height:450px; outline:1px solid red; position:relative; display:flex;">
    <div style="width:100%; height:auto; display:flex; flex-direction:column; padding:25px;">
      <span style="font-size:20px; color:red; margin-bottom:20px; ">kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</span>
      <p style="font-size:15px; color:red; line-height:28px; margin-bottom:20px;">cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p>
    </div>
  </div>
  <div style="width:70%; min-height:450px; outline:1px solid red; display:flex; flex-direction:column; padding:25px; ">
    <table class="section_menu_pala_item_table" data-menu="entrantes" style="width:100%; border:none;">
      <tr class="section_menu_pala_item_row" style="margin-bottom:4px;">
        <th class="section_menu_pala_item_header" style="border:none; text-align:left;" width="15%">Plato</th>
        <th class="section_menu_pala_item_header" style="border:none;" width="1%">1/2</th>
        <th class="section_menu_pala_item_header" style="border:none;" width="1%">1</th>
      </tr>
      <!--append rows here-->
    </table>
  </div>
</div>

Answer 1

我推荐使用word-wrap: break-word。与 word-break 相比，它只会在整个单词不能放在自己的行上而不会溢出时创建一个中断。

作为旁注，我强烈建议开始使用外部 CSS 样式表和类，因为使用内联您将无法重用样式等，并且在与所有样式混合时更容易出错且更难维护标记。

堆栈片段

<div style="width:100%; height:auto; display:flex; outline:1px solid red;">
    <div style="width:30%; min-height:450px; outline:1px solid red; position:relative; display:flex;">
	    <div style="width:100%; height:auto; display:flex; flex-direction:column; padding:25px;">
		    <span style="word-wrap: break-word;font-size:20px; color:red; margin-bottom:20px; ">kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</span>
			<p style="word-wrap: break-word;font-size:15px; color:red; line-height:28px; margin-bottom:20px;">cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p>
		
		</div>
	
	</div>
	<div style="width:70%; min-height:450px; outline:1px solid red; display:flex; flex-direction:column; padding:25px; ">
	    <table class="section_menu_pala_item_table" data-menu="entrantes" style="width:100%; border:none;">
            <tr class="section_menu_pala_item_row" style="margin-bottom:4px;">
		        <th class="section_menu_pala_item_header" style="border:none; text-align:left;" width="15%">Plato</th> 
                <th class="section_menu_pala_item_header" style="border:none;" width="1%">1/2</th>
                <th class="section_menu_pala_item_header" style="border:none;" width="1%">1</th> 
            </tr>
            <!--append rows here-->
        </table>
	
	
	</div>







</div>