web-dev-qa-db-fra.com

Comment faire pour que le texte long tienne dans une petite div?

J'ai le div avec une largeur spécifiée, mais le texte qu'il contient ne se décompose pas et ne s'insère pas dans le div en conséquence.

Cela pourrait être une mauvaise question. Comment l'adapter à l'intérieur de la div?

Je crois que ce n’est pas possible pour un ajustement complet à l’intérieur du moins peut-il être monté à l’intérieur du div en fonction de la largeur et non de la hauteur.

Css

.limit{
    width:50px;
}

HTML

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

JSFIDDLE

htmlcsscss3
13
sun

Tout ce dont vous avez besoin est Word-wrap: break-Word;

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

Démo

D'autre part, si vous ne souhaitez pas rompre la phrase, vous pouvez également utiliser la propriété overflow définie sur auto ou overflow-x: scroll; - Demo

26
Mr. Alien

Si vous cherchez un moyen de redimensionner la taille de la police de la div pour s’adapter à la totalité du texte sans reliure ni défilement du mot, vous devez utiliser JavaScript pour détecter si le texte est saturé et ajuster la taille de la police en conséquence:

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'; 
            }
        }
    }
}

Ce code fait partie d'un test que j'ai téléchargé sur Github https://github.com/ricardobrg/fitText/

0
Ricardo BRGWeb

Modification de la limite de classe. Vous pouvez afficher le texte entier sur une seule ligne.

CSS

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