8
votes

Les éléments de bloc prennent une largeur complète lorsque le texte s'envole sur deux lignes

Je suis fondamentalement juste curieux à ce sujet parce que je le vois tout le temps et personne que je parlais de savoir que je semble savoir s'il y a une solution.

généralement quand je rencontre cela c'est pour une fantaisie à la recherche de code> avec un arrière-plan sur lui et est un bloc d'affichage ou un bloc inline. p>

Le problème est-ce: dites que vous avez un bouton à l'intérieur d'une DIV qui a une largeur spécifique, disons 160px code> et vous avez un bloc d'affichage ou un bloc d'affichage code> à l'intérieur, si le texte à l'intérieur du code> ne peut pas tous Ajuster sur une ligne sur une ligne sur deux comme vous l'attendez, mais maintenant qu'il est sur deux lignes, il n'a plus besoin de prendre toute la largeur de la div, mais elle fait! P>

Je ne suis pas Vraiment cela surpris que cela se produise mais je me demandais si quelqu'un connaissait une solution de CSS ou même JavaScript qui corrige cela? p>

code: p>

<div style="width: 160px; padding: 10px; background: blue;">
  <a href="#" style="background: red; display: block;">Test with a longwrappingword</a>
</div>

text line width block

0 commentaires

3 Réponses :

0
votes

Est-ce ce que vous voulez dire? J'ai ajouté un attribut de largeur à l'ancre.

<div style="width: 160px; padding: 10px; background: blue;">
  <a href="#" style="background: red; display: block; width: 100px;">Test with a longwrappingword</a>
</div>

1 commentaires

Cela fonctionne, mais je veux que ce soit dynamique, cela fonctionnera avec n'importe quelle longueur de texte.

1
votes

Est-ce ce que vous voulez dire?

http://jsfiddle.net/upxzm/ xxx

1 commentaires

Loin d'être idéal, il doit y avoir moins de façons maladroits de le faire, mais sans JavaScript, je ne le pense pas

2
votes

fait Ce fonctionne pour vous?

<div style="width: 160px; padding: 10px; background: blue;">
  <a href="#" style="background: red; display: table; width: 1%">Test with a longwrappingword</a>
</div>
<span style="padding-left:130px">^ Where the element COULD end if it wanted to</span>

1 commentaires

Ce n'est toujours pas parfait, cela entraîne la rupture du texte à deux lignes lorsque cela n'a pas besoin d'étrangement. Comme si la div des Div était plus large ou n'avait aucune largeur définie. exemple