Html 无换行的文本溢出分割

Html 无换行的文本溢出分割,html,css,Html,Css,我有一个分区,里面有一些文本溢出分区,我无法让它在分区的边缘进行换行,即使它最终会换行 <div id="3_column"> <div class="blocks"> <div class="img"> <div class="gallery"> <a href="/link path" title="title">

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

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

如果我不能解决这个问题,我相信解决方法一定很简单。有人能帮忙吗?

似乎很好用。尝试
wordwrap:break-word

.number{
填充:0 10px;
字体系列:Verdana;
线高:16px;
字体大小:粗体;
颜色:#000000;
宽度:100%;
边框:1px纯黑;
单词包装:打断单词;
}

1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890

描述


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

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

添加
框大小:边框框
对于这个CSS规则,这应该会有所帮助-它计算100%宽度内的10px填充。

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

当我尝试您的代码时,一切看起来都很好。
div
是块级元素,将扩展到其父元素宽度的100%。在你的情况下,我看根本没有溢出。如果将此添加到CSS规则中,您可以看到没有溢出:
border:1px纯黑换行符打断工作正常,但我不想打断单词,这看起来很糟糕。我知道将100%宽度添加到10像素,但删除填充不起作用。减少宽度也不起作用。