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

div上的

break-word将导致ya

<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; word-wrap: break-word;">
		    <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 2

我建议使用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>

文字将不会包裹在我的flexbox容器中

2 个答案: