Assurez - <h1> tag de la même largeur maximale, indépendamment de la capitalisation du texte à l'intérieur

J'essaie d'afficher une série de titres variant de 60 à 160 caractères ou plus et la capitalisation varie, certains de il tout en majuscules, certaines demi-caps. Lorsque c'est surtout les minuscules de l'ensemble de 160 caractères de texte s'adapte à la largeur que je veux, mais quand il commence à faire plus de bouchons (ils doivent être plus larges), il commence à couler.

Est-il un moyen d'utiliser un fixe attractif largeur police de caractères (majuscules et minuscules) largeurs de même trop), ou de manière dynamique réduire la taille du texte pour l'adapter, ou au contraire de reconnaître la façon dont beaucoup d'espace, le texte est en train de prendre le côté serveur, et couper le bout dynamiquement? Ou pensez-vous des gens ont une meilleure solution?

OriginalL'auteur Greg | 2008-10-03

  1. 9

    De contrôle de Débordement,

    Le vrai truc est de simplement définir une limite sur la taille de la zone de texte, et de s'assurer qu'il n'y a pas des problèmes de dépassement. Vous pouvez utiliser overflow: hidden pour prendre soin de cela, et display: block l'élément afin de lui donner les dimensions exactes dont vous avez besoin.

    Monospace est Facultatif

    Oui, vous pouvez utiliser une police à espacement fixe.. il y a seulement quelques à choisir si vous souhaitez une solution de navigateur. Vous pouvez utiliser une largeur variable de la police, trop.. le monospace va seulement vous aider à obtenir la consistance à la capitalisation problème que vous avez décrit. À l'aide d'une police à espacement fixe allons vous aider à choisir une bonne largeur qui va travailler pour différentes longueurs de texte. Dans mon exemple ci-dessous, j'ai arbitrairement choisi une largeur de 250 pixels, et tapé les cordes jusqu'à ce qu'ils ont été bien au-delà de la limite, juste pour les fins de l'illustration.

    Ligne des hauteurs et des Marges

    Vous voulez la hauteur de la ligne de texte à la hauteur de la boîte.. dans ce cas, j'ai utilisé de 20 pixels. Si vous avez besoin de créer une ligne de hauteur, vous pouvez ajouter une marge inférieure.

    Note de côté: j'ai utilisé un h3 ici, parce que le texte est répété de nombreuses fois à travers la page. En général c'est un meilleur choix pour obtenir un faible niveau d'en-tête pour plus de texte (juste un choix sémantique). À l'aide d'un h1 fonctionnera de la même façon.. 

    <html>
<head>
<title>h1 stackoverflow question</title>
<style type="text/css">

* { margin:0; padding:0 }

h3 { 
    display: block;
    width: 250px;
    height: 20px;
    margin-bottom: 5px;
    overflow: hidden;
    font-family: Courier, Lucidatypewriter, monospace;
    font: normal 20px/20px Courier;
    border: 1px solid red;
}

</style>
</head>
<body>

<h3>Hello, World</h3>
<h3>Lorem Ipsum dolor sit Amet</h3>
<h3>Adipiscing Lorem dolor sit lorem ipsum</h3>
<h3>&quot;C&quot; is for Cookie, that's good enough for lorem ipsum</h3>
<h3>Oh, it's a lorem ipsum dolor sit amet.  Adipiscing elit.</h3>

</body>
</html>
    Vous avez manqué de changer les étiquettes de fin de h3. Voté dans la perspective de les changer.
    Ha, merci.. Bugs à foison. Tous les fixes.

    OriginalL'auteur keparo

  2. 3

    Quand vous dites "couper le bout de façon dynamique", je me trompe en supposant que d'une règle CSS comme:

    h1 {
    width: 400px; /* or whatever width */
    overflow: hidden;
}

    serait "couper le pied" comme vous le voulez?

    si vous ajoutez text-overflow:ellipsis le cut-off sera gentil "..."
    oh, et white-space:nowrap de cours.
    text-overflow n'est pas très largement pris en charge ...

    OriginalL'auteur David Heggie

  3. 2

    Vous pouvez également essayer de points de suspension de la solution. Tronquer le texte à un maximum de largeur et d'appliquer des points de suspension. Quelque chose comme:

    Mon titre est trop long pour ce...

    CSS3 a text-overflow: ellipsis vous pouvez utiliser, mais il n'est pas pris en charge dans Firefox.

    Hedger Wang a trouvé un solution de contournement que j'ai utilisé une couple de fois. Assez pratique.

    Cela ressemble plus à ce que je veux, mais il semble tout à fait les personnes concernées à mettre en place.

    OriginalL'auteur jeff.willis

  4. 1

    Vous pourriez fixer la largeur et de masquer le dépassement de style="width: Xpx; overflow: hidden;"

    Qui limite la largeur et couper le bout si il est trop large.

    OriginalL'auteur MrZebra

  5. 1

    MrZebra est juste dans la façon de masquer le dépassement, mais si il y a un fixe attractif largeur de la police que vous voulez utiliser, vous pouvez le configurer à l'aide des CSS font-family, juste être sûr de donner un secours pour les personnes sans la police.

    Vous pouvez également utiliser les CSS pour faire respecter la casse "text-transform', si vous voulais (même si à partir de votre lecture, ce n'est pas votre désir).

    font-variant:small-caps pourrait fonctionner, trop.

    OriginalL'auteur Jeff

  6. 0

    Vous pouvez essayer d'utiliser javascript pour par programme de test pour voir la largeur de la police, et si elle est trop grande, tirer vers le bas d'un pas et essayez de nouveau. Au lieu de tester la largeur, voir si la hauteur de l'élément est plus d'une ligne (mesurée en ems, puisque vous allez être en train de changer la taille de la police).

    var fontSize = "200%";  //your regular heading font size
var h1 = document.getElementById("myHeading");
while (h1.offsetHeight > oneLine) {
    fontSize *= (parseInt(fontSize) - 5) + "%";
    h1.style.fontSize = fontSize;
}

    vous aurez à comprendre que "oneLine" bit pour vous, désolé.

    OriginalL'auteur nickf

  7. 0

    Plutôt que d'essayer de limiter la hauteur de votre <h1> je voudrais ajuster votre CSS pour rendre votre site plus fluide - après tout, vous ne voulez pas que votre site semble rompu si l'utilisateur augmente la taille du texte.

    Essayer de régler le h1 est la hauteur en ems plutôt qu'en pixels. Si vous ajoutez ceci à votre CSS:

    body {
    font:62.5%/140% Courier, Lucidatypewriter, monospace;
}

    Il fera cadratin (1 em = 10px, alors vous pouvez définir votre en-tête hauteur:

    h1, h3 {
    ....
    height:2em;
    ....
}

    Espère que cette aide.

    OriginalL'auteur Ian Oxley