防止垂直内部<p>溢出</p>

时间:2015-02-27 11:33:13

标签: html css overflow

&#13;
&#13;
table {
  width: 660;
  height: 800;
}
table h2 {
  padding: 2px;
  border: 0px;
  border-collapse: collapse;
  border-spacing: 0px;
}
tr {
  max-height: 200px;
}
td {
  border-right: #5c5857 dashed 1px;
  width: 230px;
  max-height: 200px;
}
p {
  padding: 2px;
  font-size: 10px;
}
#post-thumbnail {
  margin: auto 0;
  padding: 2px;
}
&#13;
<table>
  <tr>
    <td>
      <span id='post-thumbnail'>
        <img src='https://lh5.googleusercontent.com/-sI6mm8ZKBss/VPBaKwgV_jI/AAAAAAAAAC0/AIC31jCods8/h120/noimg.png' /></img>
      </span>
      <h2>Blog post title</h2>
      <p>Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy
        Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey
        Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy
        Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey
        Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy
        Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy</p>

    </td>
    <td>
      <span id='post-thumbnail'>
        <img src='https://lh5.googleusercontent.com/-sI6mm8ZKBss/VPBaKwgV_jI/AAAAAAAAAC0/AIC31jCods8/h120/noimg.png' /></img>
      </span>
      <p>Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy</p>
    </td>
    <td>
      <span id='post-thumbnail'>
        <img src='https://lh5.googleusercontent.com/-sI6mm8ZKBss/VPBaKwgV_jI/AAAAAAAAAC0/AIC31jCods8/h120/noimg.png' /></img>
      </span>
      <p>Hey Hey Hey Hey Hey HEy Hey Hey Hey HEy Hey Hey Hey HEy</p>
    </td>
  </tr>
</table>
&#13;
&#13;
&#13;

我试图通过各种手段垂直修复溢出。我尝试使用谷歌搜索和其他方式。我需要帮助来修复td中垂直发生的溢出。 我正在尝试为Blogger创建博客文章显示样式。我希望缩略图显示在顶部,然后是博客文章的片段。我希望连续显示3个这样的帖子信息,但是当有很多文本时,td只会向下溢出。 我尝试了很多修复,但每次文本溢出任何其他方向或只显示一行。

2 个答案:

答案 0 :(得分:0)

td {
    overflow-x: hidden; 
    overflow-y: hidden;
}
p {
    max-height: 120px; 
}

答案 1 :(得分:0)

尝试在max-height: 250px课程上设置p

相关问题