文本未换行在段落元素中

新手上路,请多包涵

我有两个并排的浮动 div,里面有 p 标签。 p 标签中的文本没有换行,只是溢出容器,正如您在图像下方的文本中看到的那样:

例子:

我的 HTML 看起来像这样:

         <div class="submenu">
            <h3>Destinations in Europe</h3>
            <ul>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
            </ul>
            <h3>Features</h3>
            <div>
                <img src="/assets/images/o/menu/city-feat-one.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
                </p>
            </div>
            <div>
                <img src="/assets/images/o/menu/city-feat-two.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
                </p>
            </div>
        </div>

我的CSS:

 #rb-menu-com li .submenu > div {
    width:48%;
    float:left;
    position: relative;
}

#rb-menu-com li .submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative;
}

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
}

有谁之前经历过这个吗?我没有!!快把我逼疯了!

原文由 Jon Hudson 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 264
2 个回答

仅当出现分词时才会出现换行。

如果你有一个这么长的“词”,那么它就没有地方可以断了。

正确的解决办法是写真实的内容,而不是写无意义的字符串。如果您使用的是用户生成的内容,则添加对超长单词的检查并禁止使用它们(或者为 URL 删除其中的一部分,同时将整个内容保留在链接中)。

或者,您可以使用 word-break CSS 属性 告诉浏览器在单词中间换行。

 p { word-break: break-all }

(注意 浏览器支持)。

或者,如果文本不适合容器,您可以使用 overflow 截断文本。

原文由 Quentin 发布,翻译遵循 CC BY-SA 4.0 许可协议

将此样式赋予 <p> 标签。

 p {
    word-break: break-all;
    white-space: normal;
}

原文由 Praveen Kumar Purushothaman 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题