Cause ligne à renvoyer à la ligne au bout de 100 caractères

Est-il un moyen en CSS que je peut causer le 3ème élément dans cette liste, qui est plus longue que le reste, pour conclure à une nouvelle ligne si elle s'étend sur plus de 100 personnages? de sorte que le reste du texte est sur la ligne suivante?

J'ai essayé de donner que <li> moins de la largeur, mais le contenu déborde.

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

Comment puis-je faire cela?

Ici est un JS Fiddle où je suis en train de le faire: http://jsfiddle.net/ZC3zK/

OriginalL'auteur Irfan Mir | 2013-05-25

css css3

37

Votre ligne n'est pas la rupture naturellement, parce que vous ne t ont tous les espaces. Vous pouvez utiliser word-wrap pour forcer les pauses, puis ajouter un max-width de dire comment il peut être.

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 le saut de ligne. Vérifier ici et ici pour des exemples de JavaScript.

J'ai fini par utiliser max-width:160em; comme un em est une lettre de m de largeur et 160 de 160 caractères.
Fait que le travail? Je crois que la police la taille est mesurée en hauteur (plus précisément, font-size) - pas nécessairement largeur des caractères. Par exemple, j'ai mis un certain nombre de différents em largeurs des polices et des tailles de un vous allez voir la dernière des largeurs de ne pas correspondre à la largeur des caractères.
Le em unité n'a pas de relation définie à la largeur d'un “m” ou n'importe quelle autre lettre; il est facile de voir, par des essais, qui dans la plupart des polices de caractères, “m” est beaucoup plus large que em.
Oui, 160em semble avoir résolu le problème. Peut-être que c'est par hasard?

OriginalL'auteur
13

Le plus proche que vous pouvez obtenir est de définir une largeur maximale de ch unités. Cette unité correspond à la largeur du chiffre zéro “0”, mais c'est l'approximation la plus proche à la “moyenne de la largeur des caractères” que nous avons dans le CSS. Cela signifie que certaines lignes peuvent être un peu plus de 100 caractères. Depuis ch n'est pas universellement pris en charge, certains de sauvegarde est souhaitable, à l'aide de la em unité. Comme une règle simple, typique texte anglais, la moyenne de la largeur des caractères est 0.4em ou un peu plus. (Cela dépend de beaucoup de choses, y compris la nature du texte et de la police).
```
li { max-width: 40em; max-width: 100ch; }
```
Ce sera la cause de la normale d'emballage, ce qui signifie (pour le texte anglais) rupture à des espaces si nécessaire, et éventuellement après certains personnages comme le trait d'union. Si vous voulez anormale d'emballage, trop, vous devez définir exactement comment la mettre en œuvre à l'aide de différentes techniques comme césure ou espaces de largeur nulle. Éviter la mise word-wrap: break-word, souvent offerts comme l'huile de serpent – elle litre allié brea ks mot s, et il est adapté pour des occasions très spéciales.

Vous pouvez obtenir une correspondance exacte entre les ch de l'unité et de la largeur moyenne des caractères en utilisant une police à espacement fixe. C'est normalement pas susceptibles de texte normal, seulement pour un code informatique.

Noter que 100 caractères est beaucoup plus grande que les longueurs de ligne souvent recommandé par les typographes. La longueur optimale est d'environ de 60 ans, ou même moins (encore une fois, selon la nature du texte et de la police, ainsi que de l'espacement de ligne), et 90 doit être considérée comme maximale.

Merci de fournir ces informations. Je l'ai trouvé très utile. Connaissez-vous des articles traitant de la ch unité ou quoi que ce soit de parler de son soutien? Est-il valide en CSS ( partie de la spec )? En ce qui concerne votre lettre est de 0.4 em. Avez-vous un article déclarant ou la preuve de cela?
Mon lien pour le ch unité décrit la prise en charge et des liens vers les spec; CSS Valeurs et les Unités de Module Niveau 3 est un Candidat de la Recommandation, ce qui signifie qu'il est plutôt mature. Le 0.4em règle de base est basé sur mes expériences avec différentes couramment utilisé des polices, et si vous voulez un chiffre plus exact, test avec la police(s) que vous spécifiez dans votre code CSS.
Oh, je n'ai pas vu le lien. Oui, il est tout à fait mature. Bon, je vais prendre votre parole. 0.4 em = 1 ch.
Merci pour le partage. Est-il un endroit où je peux voir la couverture de support pour le ch? De son vrai gain de temps.
En fait, jamais l'esprit. Je l'ai trouvé.

OriginalL'auteur

Vous pouvez donner le conteneur d'une largeur et d'utiliser le CSS3 word-wrap propriété. Pas exactement 100 caractères.

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

OriginalL'auteur

0

Je n'ai plus de solution pour l'habillage de la Chaîne.

Mon code est renvoyé à la ligne de Chaîne sans casser mot.

outputString="+$('cssSelector').text()+"

OriginalL'auteur

S'il vous plaît essayez ce code. J'ai mis en œuvre avec succès parole d'habillage à l'aide de 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);
}

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.