您只需要word-wrap: break-word;
第一个
Demo
另一方面，如果你不想打断句子，你也可以使用overflow属性设置为auto或overflow-x: scroll;-Demo

如果您正在寻找一种方法来调整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/的测试的一部分

修改了类限制。您可以在一行中显示整个文本。
CSS

.limit p {
    overflow-x: scroll;
    white-space: nowrap;
    width: 50px;
}

您也可以使用以“vw”为单位的字体大小。

.limit {
font-size : 1.3vw;
}

将white-space的值从nowrap修改为normal解决了我的问题，使文本适合一个固定的div。

你可以这样设计它。这很简单。看数字4是如何滚动的。
第一个