html - 不换行的文本溢出分割

Question

我有一个分区，里面有一些文本溢出了分区，我无法让它在分区的边缘换行，即使它最终换行。

<div id="3_column">
    <div class="blocks">
        <div class="img">
            <div class="gallery">
                <a href="/link path" title="title">
                    <img border="0" src="/image.jpg" alt="text" title="text" />
                </a>
            </div>
        </div>
        <div>
            <h4>
                <a href="/link_path">Title</a>
            </h4>
            <div class="number">number 42 characters</div>
            <div class="descr">
                <p>
                    Description
                </p>
            </div>

溢出的除法是“number”。我试过在两侧放置填充，我试过将宽度设置为 90%。我试过定义换行，只有 break word 会起作用。它确实换行，但应该更早换行。

代码是:

.number {
    padding: 0 0 0 10px;
    font-family: Verdana;
    line-height: 16px;
    font-weight: bold;
    color: #000000;
    width: 100%;
}

如果我无法解决问题，我确信解决方案一定非常简单。有人可以帮忙吗？

Answer 1

它似乎工作正常。试试 word-wrap: break-word

.number {
  padding: 0 0 0 10px;
  font-family: Verdana;
  line-height: 16px;
  font-weight: bold;
  color: #000000;
  width: 100%;
  border: 1px solid black;
  word-wrap: break-word;
}

<div id="3_column">
  <div class="blocks">
    <div class="img">
      <div class="gallery">
        <a href="/link path" title="title">
          <img border="0" src="/image.jpg" alt="text" title="text" />
        </a>
      </div>
    </div>
    <div>
      <h4>
                <a href="/link_path">Title</a>
            </h4>
      <div class="number">1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div>
      <div class="descr">
        <p>
          Description
        </p>
      </div>