web-dev-qa-db-fra.com

Cause de ligne à la nouvelle ligne après 100 caractères

Est-il possible en CSS que le 3ème élément de cette liste, qui est plus long que le reste, soit renvoyé à une nouvelle ligne si elle comporte plus de 100 caractères? de sorte que le reste du texte se trouve à la ligne suivante?

J'ai essayé de donner à ce <li> une largeur inférieure, mais le contenu débordait.

J'ai aussi essayé overflow:hidden; et ça le coupe, mais le reste est caché et pas sur une nouvelle ligne.

Comment puis-je faire ceci?

Voici un JS Fiddle où j'essaie de faire ceci: http://jsfiddle.net/ZC3zK/

csscss3
17
Irfan Mir

Votre ligne ne se rompt pas naturellement car vous ne disposez pas d’espace. Vous pouvez utiliser Word-wrap pour forcer les sauts, puis ajouter une largeur maximale pour indiquer sa largeur.

CSS

li{
    max-width:200px;
    Word-wrap:break-Word;
}

HTML

<ul>
    <li>Hello</li>
    <li>How are you</li>
    <li>SearchImagesMapsPla yYouTubeNewsGmailDriveMoreCalendarTranslat eMobileBooksOffersWalletShoppingBloggerFin ancePhotosVideosEven more »Account OptionsSign inSearch...</li>
    <li>SearchImagesMapsPla yYouTubeNewsGmailDriveMoreCalendarTranslateMobileBooksOffersWalletShoppingBloggerFinancePhotosVideosEvenmore»AccountOptionsSigninSearch...</li>
</ul>

http://jsfiddle.net/daCrosby/ZC3zK/1/

Vous auriez besoin de JavaScript pour compter exactement 100 caractères et briser la ligne. Vérifiez ici et ici pour des exemples JavaScript.

37
DACrosby

Le plus proche que vous puissiez obtenir est de définir une largeur maximale dans ch unités . Cette unité est définie comme étant la largeur du chiffre zéro «0», mais c’est l’approximation la plus proche de la «largeur moyenne des caractères» que nous avons en CSS. Cela signifie que certaines lignes peuvent comporter un peu plus de 100 caractères. ch n'étant pas universellement pris en charge, il est conseillé d'effectuer une sauvegarde à l'aide de l'unité em. En règle générale, pour un texte anglais typique, la largeur moyenne des caractères est 0.4em ou un peu plus. (Cela dépend de beaucoup de choses, y compris la nature du texte et la police.)

li { max-width: 40em; max-width: 100ch; }

Cela entraînera un retour à la ligne normal, ce qui signifie (pour le texte anglais) une casse d’espace au besoin, et éventuellement après certains caractères comme le trait d’union. Si vous souhaitez également un wrapping anormal, vous devez définir exactement comment et le mettre en œuvre à l'aide de diverses techniques telles que la césure ou les espaces de largeur nulle. Évitez le paramètre Word-wrap: break-Word, souvent proposé sous forme d’huile de serpent - il lira littéralement les mots, et il ne convient que pour des occasions très spéciales.

Vous pouvez obtenir une correspondance exacte entre l'unité ch et la largeur moyenne des caractères uniquement à l'aide d'une police monospace. Cela ne convient généralement pas au texte normal, mais uniquement au code informatique.

Notez que 100 caractères est beaucoup plus grand que la longueur de ligne recommandée par les typographes. La longueur optimale est d'environ 60 ou même moins (encore une fois, en fonction de la nature du texte et de la police, ainsi que de l'interligne), et 90 doit être considéré comme le maximum.

13
Jukka K. Korpela

S'il vous plaît essayez ce code. J'ai réussi à implémenter le wrapping Word en utilisant Javascript.

var a = $('.targetDiv').text().match(/.{1,50}/g);
var b = '';
if (a != null) {
    for (var i = 0; i< a.length; i++) {
        if (a[i].toString() != null) {
            b = b + '<p>' + a[i].toString() + '</p>';
        }
    }
    $('.targetDiv').html(b);
}
0
Amit Kumar

J'ai une autre solution pour envelopper String. 

Mon code va envelopper String sans casser Word.

output String = '' + $ ('sélecteur css'). text () + ''

0
Amit Kumar

Vous pouvez donner une largeur au conteneur et utiliser la propriété CSS3 Word-wrap. Pas exactement 100 caractères cependant.

<ul style="width: 100px; Word-wrap:break-Word;">
  <li>Hello</li>
  <li>How are you</li>
  <li>SearchImagesMapsPlayYouTubeNewsGmailDriveMoreCalendarTranslateMobileBooksOffersWalletShoppingBloggerFinancePhotosVideosEven more »Account OptionsSign inSearch...</li>
<ul>
0
Lance Hudson