дочерний стол, перекрывающий родительский div

с помощью пользователей ckeditor можно добавить описание к своей публикации. в некоторых описаниях ширина таблицы шире, чем содержащая div. как мы вынуждаем описание помещаться внутри содержащего div?дочерний стол, перекрывающий родительский div

<div style="float:left; padding-top: 4px; font-size:13px; width:500px; border-style:solid;">      
<table border="1" cellpadding="0" cellspacing="0" style="width:576px; height: 120px;">   
    <tr height="39">   
    <td height="39">     
     <p>     
     <span style="font-size:16px;"> 
      <span style="color: rgb(255, 140, 0);">APPLE FACTORY RECERTIFIED IPAD/1ST-GENERATION TABLET APPLE: 
      </span> 
     </span> 
     </p>    
     <p>     &nbsp; 
     </p>    
     <p>     
     <span style="font-size: 16px;"> 
      <span style="color: rgb(255, 140, 0);">A4/A4X1-1.00G 
      </span> 
     </span> 
     </p>    
     <p>     
     <span style="font-size: 16px;"> 
      <span style="color: rgb(255, 140, 0);">256MB/1-DIMM 
      </span> 
     </span> 
     </p>    
     <p>     
     <span style="font-size: 16px;"> 
      <span style="color: rgb(255, 140, 0);">16GB/FLASH 
      </span> 
     </span> 
     </p>    
     <p>     
     <span style="font-size: 16px;"> 
      <span style="color: rgb(255, 140, 0);">802.11A/B/G/N+BT INTEGRATED-GRAPHICS/0MB 9.7WXGA- 
      </span> 
     </span> 
     </p>    
     <p>     
     <span style="font-size: 16px;"> 
      <span style="color: rgb(255, 140, 0);">TOUCHSCREEN/MULTI-TOUCH APPLE/IOS-4.0 1.5LBS 1YR 
      </span> 
     </span> 
     </p>   </td>  
    </tr> 
</table> 
<p> &nbsp; 
</p>      
</span>    
</div>

источник

2012-02-13 complexi

Вы также можете добавить атрибут overflow: hidden; в первом сНу стилизации, как это:

<div style="float:left; padding-top: 4px; font-size:13px; width:500px; border-style:solid; overflow: hidden;">      
<table border="1" cellpadding="0" cellspacing="0" style="width:576px; height: 120px;">   
    <tr height="39">   
    <td height="39">     
     <p>     
     <span style="font-size:16px;"> 
      <span style="color: rgb(255, 140, 0);">APPLE FACTORY RECERTIFIED IPAD/1ST-GENERATION TABLET APPLE: 
      </span> 
     </span> 
     </p>    
     <p>     &nbsp; 
     </p>    
     <p>     
     <span style="font-size: 16px;"> 
      <span style="color: rgb(255, 140, 0);">A4/A4X1-1.00G 
      </span> 
     </span> 
     </p>    
     <p>     
     <span style="font-size: 16px;"> 
      <span style="color: rgb(255, 140, 0);">256MB/1-DIMM 
      </span> 
     </span> 
     </p>    
     <p>     
     <span style="font-size: 16px;"> 
      <span style="color: rgb(255, 140, 0);">16GB/FLASH 
      </span> 
     </span> 
     </p>    
     <p>     
     <span style="font-size: 16px;"> 
      <span style="color: rgb(255, 140, 0);">802.11A/B/G/N+BT INTEGRATED-GRAPHICS/0MB 9.7WXGA- 
      </span> 
     </span> 
     </p>    
     <p>     
     <span style="font-size: 16px;"> 
      <span style="color: rgb(255, 140, 0);">TOUCHSCREEN/MULTI-TOUCH APPLE/IOS-4.0 1.5LBS 1YR 
      </span> 
     </span> 
     </p>   </td>  
    </tr> 
</table> 
<p> &nbsp; 
</p>      
</span>    
</div>

Это сократит перекрывающийся текст, но он будет вписываться в родительских делах.

источник

2012-02-13 10:15:14 Giannis

Джон, спасибо за лакомый кусочек. вы говорите, что переполнение: скрытое - это лучшее, что я могу сделать? john h – complexi

, чтобы заставить его просто придать таблице атрибут максимальной ширины. Вы установили атрибут width равным 576px, который, безусловно, больше, чем 500px div.

style="max-width:500px; height: 120px;">

приветствует

источник

2012-02-13 10:11:13 CyrillC

cyrillc, спасибо за лакомый кусочек, но таблица CSS управляется пользователем, а не системой. использование любого CSS там не поможет. john h – complexi

Возможно, вы захотите написать сценарий, который заменит таблицу max-width после User-CSS с помощью JS. – CyrillC

дочерний стол, перекрывающий родительский div

ответ

Смежные вопросы