如何使长文本适合小div?

时间:2013-12-13 11:17:35

标签: html css css3

我有一个指定宽度的div,但是里面的文字没有分解并相应地适合div。

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

我认为完全不能完全贴合,至少可以根据宽度而非高度安装在div内。

的CSS

.limit{
    width:50px;
}

HTML

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

JSFIDDLE

5 个答案:

答案 0 :(得分:26)

您所需要的只是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

答案 1 :(得分:0)

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

CSS

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

答案 2 :(得分:0)

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

的测试的一部分

答案 3 :(得分:0)

您可以这样设置样式,这是非常简单的方法 看起来 4 Scrooled

#ol_list li {

    width: 380px;
    height: 80px;
    background-color: silver;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 0.5cm;
    border: 2px solid purple;
    border-radius: 12%;
}

 #ol_list li span {
  
      display: block;
     max-width: 370px;
    max-height: 20px;
      overflow-x:hidden;
 }
<ol id="ol_list">
<li><span>text1</span></li>
<li><span>text2</span></li>
<li><span>text3</span></li>
<li><span>scrooled ghghghfghfjhfghghhfghhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhfghfghfghfghfghfghfghfhhh</span></li>
<li><span>text5</span></li>
</ol>

答案 4 :(得分:0)

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

.limit {
font-size : 1.3vw;
}