没有换行的文本溢出分割

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%。我试着定义了"只换行"这个词。它确实包起来了，但应该早点包起来。

代码为：

.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>

Answer 2

您将100%的宽度与左填充相结合，在100%的基础上增加10px，使其比周围的容器更宽：

.number {
    padding: 0 0 0 10px;
    width: 100%;
}

将box-sizing: border-box;添加到这个CSS规则中，这应该会有所帮助——它计算出内的10px填充，即100%宽度。

Answer 3

我能看到的解决问题的最佳解决方案是发现在数字框中写入内容的人使用了不间断空格，而不是按空格键。在无法访问内容的情况下，有没有办法设置换行符并将非中断空格视为标准空格？