html - 如何使长文本适合小的 div?

标签 html css

我有指定宽度的 div,但其中的文本没有分解并相应地适合 div。

这可能是一个错误的问题。如何让它适合div?

我认为它不可能完全适合内部至少它可以根据宽度而不是高度适合在 div 中。

CSS

.limit{
    width:50px;
}

HTML

<div class="limit">
    <p>fasfhfhsjdhkjhdkjhfjkhdsfjkhdfjhdfiuhadfhjdfhjadskf kjahsdjfahdfuahsdf dhsf</p>
</div>

JSFIDDLE

最佳答案

您只需要 word-wrap: break-word;

.limit{
    width:50px;
    word-wrap: break-word;
}
<div class="limit">
    <p>fasfhfhsjdhkjhdkjhfjkhdsfjkhdfjhdfiuhadfhjdfhjadskf kjahsdjfahdfuahsdf dhsf</p>
</div>

Demo

另一方面,如果你不想打断句子,你也可以使用 overflow 属性设置为 autooverflow-x: scroll ; - Demo

关于html - 如何使长文本适合小的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20565201/

相关文章:

html - 使用 CSS 连续翻转 3 个图像

layout - css hover 创建边框但推送内容

html - icon-bar 类不显示 Button 中的行

html - 纯 CSS 响应式翻转框

html - 如何使用 css 使子元素宽度为父元素宽度的 30%?

html - 一些 react 卡上的文字错位

javascript - 如何检测一个或多个 JS/CSS 库加载失败(例如 CDN)?

html - 如何在 Chrome 中使文本呈现像 Internet Explorer 一样清晰

html - 使视频宽度 100%,同时保持自定义高度

jquery - 如果我有 3 个 <tr> 元素,我如何在任何一次单击时只允许突出显示一个? - CSS,jQuery