Question

我正在尝试创建一个包含2行但内容溢出的表格，您可以在my codepen中看到。

FYI溢出仅适用于小屏幕，您可以通过缩小浏览器的屏幕尺寸或开发者模式进行检查。

我尝试了最大宽度，单词溢出也没有用，你可以帮我解决这个问题。可能很容易，但让我疯了......

感谢您的帮助！

代码：

＆＃13;

    <div class="bcontent" style="background-color:#F77B72;">
    <h2 style="color:#FFF; text-align:center;">GET IN TOUCH WITH US</h2>
    <hr style="width:10%; height:2px; color:#fff;background-color:#fff;" />
        <div class="container">
    <h4 style="color:#FFF; line-height:180%; text-align:center;">
    <table width="100%" align="middle">
      <tr>
    	<td>ABCD abcdssd</td>
    	<td>
    <a style="color:#fff;"href="mailto:rkthemes.social@gmail.com"> abcdefghijk@gmail.com            
    </a>
    	</td>
    	<td>XYZ abcdssd</td>
      </tr>
      <tr>
    	<td>&nbsp;</td>
    	<td>&nbsp;</td>
    	<td>&nbsp;</td>
      </tr>
      <tr>
        <td>+91-9876543210</td>
    	<td><a href="#" id="fb">
    	<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    					fill="#fff" width="32px" height="32px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    	<path id="Facebook" d="M38.078,22.431c0,2.268,0,12.391,0,12.391H29v15.152h9.078V95h18.649V49.975h12.513
    					c0,0,1.172-7.265,1.74-15.209c-1.629,0-14.183,0-14.183,0s0-8.815,0-10.36c0-1.548,2.033-3.631,4.043-3.631c2.006,0,6.239,0,10.16,0
    					c0-2.063,0-9.191,0-15.774c-5.235,0-11.189,0-13.814,0C37.617,5,38.078,20.167,38.078,22.431z"/>
    	</svg>
    	</a>
    	<a href="#" id="tw" >
    	<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	fill="#fff" width="32px" height="32px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100; color:#fff;" xml:space="preserve">
    	<path id="Twitter__x28_alt_x29_" d="M84.803,46.564c5.055-0.417,8.483-2.715,9.803-5.833c-1.824,1.12-7.484,2.341-10.61,1.178
    	c-0.153-0.734-0.324-1.432-0.492-2.062c-2.382-8.746-10.537-15.792-19.082-14.941c0.691-0.279,1.392-0.539,2.092-0.772
    	c0.94-0.337,6.459-1.235,5.59-3.183c-0.733-1.713-7.475,1.295-8.744,1.688c1.675-0.63,4.447-1.714,4.743-3.64
    	c-2.567,0.352-5.087,1.566-7.034,3.331c0.703-0.757,1.236-1.679,1.349-2.672C55.57,24.033,51.57,32.853,48.333,41.408
    	c-2.542-2.463-4.795-4.403-6.816-5.48c-5.67-3.041-12.449-6.213-23.091-10.164c-0.327,3.521,1.741,8.203,7.7,11.316
    	c-1.291-0.173-3.652,0.213-5.54,0.665c0.769,4.034,3.28,7.357,10.079,8.964c-3.107,0.205-4.713,0.912-6.168,2.436
    	c1.415,2.805,4.868,6.107,11.08,5.429c-6.906,2.977-2.816,8.49,2.804,7.667C28.794,72.143,13.679,71.416,5,63.134
    	c22.661,30.879,71.921,18.262,79.262-11.481c5.499,0.047,8.733-1.905,10.738-4.057C91.831,48.134,87.239,47.578,84.803,46.564z"/>
    	</svg>
        </a>
    	<a href="#" id="yo">
    <svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    fill="#fff" width="32px" height="32px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    <path id="YouTube__x28_alt_x29_" style="fill-rule:evenodd;clip-rule:evenodd;" d="M95,32.458C95,25.025,88.979,19,81.55,19h-63.1
   					C11.021,19,5,25.025,5,32.458v36.084C5,75.975,11.021,82,18.45,82h63.1C88.979,82,95,75.975,95,68.542V32.458z M41,65.724V31.83
    					l25.702,16.947L41,65.724z"/>
  </svg>
  </a>
  </td>
  <td>+91-9876543210</td>
  </tr>
</table>
    		
   </h4>
   </div>
  </div>

＆＃13;

Answer 1

也许您可以使用media queries来达到理想的效果。尝试添加以下内容：

@media screen and (max-width: 320px) {
    td {
        font-size: 11px;
    }
}

这会将font-size元素的td更改为较小的字体，以便所有内容都适合表格。

Demo

表内容溢出了部门

1 个答案: