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％宽度与左侧填充相结合 - 将100px增加到100％，使其比周围容器更宽：

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

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

Answer 3

我可以看到解决问题的最佳解决方案是找到写入数字框中内容的人使用了不间断的空格而不是按空格键。无法访问内容，有没有办法设置自动换行并将不间断的空间视为标准空间？

没有包装的文本溢出部分

3 个答案: