如何使长文本适合小的 div？

Question

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

这可能是一个错误的问题。如何使其适合div？

我相信它不可能完全适合内部至少可以根据宽度而不是高度将它安装在 div 中。

CSS

 .limit{
    width:50px;
}

HTML

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

小提琴

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

Answer 1

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

 .limit{
    width:50px;
    word-wrap: break-word;
}

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

演示

另一方面，如果你不想打破句子，你也可以使用 overflow 属性设置为 auto 或 overflow-x: scroll; -cab- 81Defc

原文由 Mr. Alien 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您正在寻找一种方法来调整 div 的字体大小以适应整个文本而无需分词或滚动，您应该使用 JavaScript 来检测文本是否溢出并相应地调整字体大小：

 function fitText(outputSelector){
    // max font size in pixels
    const maxFontSize = 50;
    // get the DOM output element by its selector
    let outputDiv = document.getElementById(outputSelector);
    // get element's width
    let width = outputDiv.clientWidth;
    // get content's width
    let contentWidth = outputDiv.scrollWidth;
    // get fontSize
    let fontSize = parseInt(window.getComputedStyle(outputDiv, null).getPropertyValue('font-size'),10);
    // if content's width is bigger then elements width - overflow
    if (contentWidth > width){
        fontSize = Math.ceil(fontSize * width/contentWidth,10);
        fontSize =  fontSize > maxFontSize  ? fontSize = maxFontSize  : fontSize - 1;
        outputDiv.style.fontSize = fontSize+'px';
    }else{
        // content is smaller then width... let's resize in 1 px until it fits
        while (contentWidth === width && fontSize < maxFontSize){
            fontSize = Math.ceil(fontSize) + 1;
            fontSize = fontSize > maxFontSize  ? fontSize = maxFontSize  : fontSize;
            outputDiv.style.fontSize = fontSize+'px';
            // update widths
            width = outputDiv.clientWidth;
            contentWidth = outputDiv.scrollWidth;
            if (contentWidth > width){
                outputDiv.style.fontSize = fontSize-1+'px';
            }
        }
    }
}

此代码是我已上传到 Github https://github.com/ricardobrg/fitText/ 的测试的一部分

原文由 Ricardo Gonçalves 发布，翻译遵循 CC BY-SA 4.0 许可协议