indice et exposant pour le même élément

Existe-t-il un moyen d'ajouter à la fois l'indice et l'exposant au même élément? Si je le faisindice et exposant pour le même élément

Sample Text<sub>Sub</sub><sup>Sup</sup>

l'exposant apparaît après l'indice. Une idée que j'ai eu est de faire quelque chose comme:

<table> 
    <tr> 
     <td rowspan='2' valign='center'>Sample Text</td> 
     <td>Sup</td> 
    </tr> 
    <tr> 
     <td>Sub</td> 
    </tr> 
</table>

Il semble faire le travail mais est assez moche. De meilleures idées?

Merci!

Source

2010-09-18 Amati

Qu'est-ce que vous en train d'essayer d'atteindre? Je devinerais que vous devriez regarder MathML, mais votre exemple a été trop abstrait pour le dire. – Quentin

C'est juste quelques données que je veux afficher d'une manière spécifique. Rien de spécial comme les mathématiques, la physique, la chimie ... etc. J'ai vérifié MathML mais il n'est pas supporté nativement par IE et cela signifie que je ne peux pas l'utiliser. – Amati

Je ne suis pas gourou CSS mais vous pouvez essayer quelque chose le long des lignes de http://jsfiddle.net/TKxv8/1/

Il y a beaucoup de valeurs codées en dur et les effets sur d'autres éléments autour ne peut être trouvé par la suite, mais il est un bon endroit pour commencer.

Sample Text 
<span class='supsub'> 
    <sup class='superscript'>Sup</sup> 
    <sub class='subscript'>Sub</sub> 
</span> 

.supsub {position: absolute} 
.subscript {color: green; display:block; position:relative; left:2px; top: -5px} 
.superscript {color: red; display:block; position:relative; left:2px; top: -5px}

Source

2010-09-18 19:10:31 CyberDude

Merci, exactement ce dont j'avais besoin! Vous pouvez inclure votre code ici, au cas où quelqu'un aurait le même problème, car la version de jsfiddle pourrait être supprimée. – Amati

.supsub {position: absolute} .indice {couleur: vert; bloc de visualisation; position: relative; à gauche: 2px; haut: -5px} .superscript {couleur: rouge; bloc de visualisation; position: relative; à gauche: 2px; top: -5px} Exemple de texte ^Sup_Sous – CyberDude

désolé au sujet de la mise en forme - ne fonctionne pas dans les commentaires et Je n'ajouterai pas de nouvelle réponse – CyberDude

Eh bien, vous pouvez spécifier la position de sup par rapport à la bordure droite de Sample Text.

http://jsfiddle.net/a754h/

Source

2010-09-18 18:50:40

Pas très sélectionnable. MathML serait meilleur, bien qu'il ne soit pas largement supporté. –

Ben, puis-je demander ce que vous voulez dire par "pas très sélectionnable"? Vous voulez dire si quelqu'un veut copier/coller les données? – Amati

semble échouer (par rapport à l'attente) lorsque le sup est plus long que le sous, et le texte continue après. Dans cet exemple, la largeur est déterminée par le sous-marin. les positions super justes, mais ne développe pas la boîte englobante. –

Voici une solution propre. Créer deux classes CSS:

.nobr { 
    white-space: nowrap; 
} 
.supsub { 
    display: inline-block; 
    margin: -9em 0; 
    vertical-align: -0.55em; 
    line-height: 1.35em; 
    font-size: 70%; 
    text-align: left; 
}

Vous pouvez déjà avoir la classe "nobr" comme < > remplacement nobr. Maintenant, pour exprimer la formule moléculaire pour le sulfate, utilisez la classe « supsub » comme suit:

<span class="nobr">SO<span class="supsub">2-<br />4</span></span>

qui est, mettez votre superscript/indice au sein de la classe « supsub » et mettre un < br/> entre eux. Si vous aimez vos indices/indices un peu plus grands ou plus petits, ajustez la taille de la police, puis bricolez avec l'alignement vertical et la hauteur de ligne. Le paramètre -9em dans le paramètre de marge consiste à empêcher les indices supérieurs/indices d'être ajoutés à la hauteur de la ligne les contenant; toute grande valeur fera l'affaire.

Source

2013-06-10 08:48:42 Dragonfly

Celui-ci est similaire à l'approche de CyberDudes, en outre, il indente le texte suivant en fonction de la largeur des sous et sup:

http://jsfiddle.net/jwFec/1/

Some text <span class="supsub"><sup>sup</sup><sub>sub</sub></span> followed by other text.<br /> 

<style> 
.supsub { 
    display: inline-block; 
} 

.supsub sup, 
.supsub sub { 
    position: relative; 
    display: block; 
    font-size: .5em; 
    line-height: 1.2; 
} 

.supsub sub { 
    top: .3em; 
} 
</style>

Source

2014-07-23 10:35:33 Thomas

indice et exposant pour le même élément

Répondre

Questions connexes