Question

问题

假设文本没有换行。我有一组正确包装的文本，因为它是一个长行。但是，我的另一组文本剂量包装因为它的某些部分有<br>标记。但是我仍然有一个非常长的文本应该延伸到页面的末尾，但它会快速换行。

直播示例

当我在geovillageva.com上发布这个例子时，你可以看到，关于Under Construction的第一篇文章是糟糕的包装。我只有Greetings，Geo Jones，所有者和开发人员的<br>标签。中间的长文本应该到边界的边缘。第二篇文章是良好包装的例子，边界的边缘。

HTML，请记住这只是新闻部分，不包括导航栏

<div id=newsboard>
  <div class=newsboard_topic>
    <h1>Website in Development!</h1>
    <p class=newsboard_topic_article>
      <img class=newsboard_topic_picture src="/image/newsboard/construction.gif" alt="Dev">
      Greetings!
      <br>The GeoVillage website is currently under construction, but feel free to register and login to check out the stuff we have so far!
      <br>- Geo Jones 
      <br>Owner and Developer
    </p>
  </div>
  <div class=newsboard_topic>
    <h1>kimmy and donald!</h1>
    <p class=newsboard_topic_article>
      <img class=newsboard_topic_picture src="/image/newsboard/kimdon.jpg" alt="kimmyanddonald">
      The fan fiction of Donald Trump and Kim Jong Un! Yes, they photoshopped it. This is a test by the way to test the standing of articles.
    </p>
  </div>
</div>

CSS

#newsboard {
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 25px;
    margin-bottom: 25px;
    border-color: #0099FF;
    border-style: solid;
    border-width: 5px;
}

.newsboard_topic {
    padding: 20px;
    display: block;
    border-style: none none dashed none;
    border-color: #0099FF;
    border-width: 5px;
}

.newsboard_topic_article {
    display: inline-block;
    vertical-align: top;
    word-wrap: break-word;
    margin: 0px;
    padding: 10px;
}

.newsboard_topic_picture {
    display: block;
    float: left;
    margin-right: 10px;
}

Answer 1

我认为您的块的动态分配宽度可能会发生此问题，您可以查看此解决方案：

.newsboard_topic_article
{
  display: inline-block;
  vertical-align: top;
  margin: 0px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box; 
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
  hyphens: auto;
}

文字有时会翘曲，有时不会

1 个答案: