Question

我希望在一个方框中显示一些文字。

因此，我创建了一个固定宽度的块，使长字断开，并在溢出时隐藏文本：

article {
   display: inline-block;
   width:160px;
   height: 160px;
   padding: 10px;
   overflow: hidden;
   word-wrap: break-word;
}

到目前为止，这么好。文本正确包装，长单词分解和换行。请注意，长字在容器的填充处正确包装，并且不会运行到右边框。

当较长的文本超出容器的垂直大小时，会出现问题。文本在容器的填充上运行，并且在到达底部边框之前不会隐藏。

请参阅此小提琴http://jsfiddle.net/odykqcag/6/

你知道如何控制这种非凡的溢出吗？

Answer 1

您可以overflow改为p。

请参阅下面的代码段：

＆＃13;

* {
  padding: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
section {
  background-color: #ccc;
  padding: 12px;
  margin: 40px;
}
article {
  display: inline-block;
  padding: 12px;
  margin: 2px;
  width: 160px;
  height: 160px;
  background-color: #eee;
  word-wrap: break-word;

}
.good {
  background-color: #cfc;
}
.bad {
  background-color: #fcc;
}
img {
  width: 38px;
  padding: 4px;
  float: left
}
p {
  background-color: #ccf;
  overflow:hidden;
  height:136px;
}

＆＃13;

<section>
  <article class="good">
    <p>Few short words wrap well and nice</p>
  </article>
  <article class="good">
    <p>Longlonglonglonglongwords wrap correctly at the padding, not running to the right border</p>
  </article>
  <article class="bad">
    <p>With many many words, the longer paragraph runs over the padding and doesnt hide until it reaches the bottom border... and more words to make a long paragraph and more more more more and more more and more and more</p>
  </article>
</section>

＆＃13;

带有溢出隐藏的长段落在容器填充上运行

1 个答案: