Cette page-ci est similaire à la page précédente, sauf qu'ici on applique la stylisation à des éléments de type en-ligne, à savoir des « span ». Comme la simulation vous le fera réaliser,
les possibilités sont exactement les mêmes que pour les éléments de niveau bloc. Il y a cependant des différences majeures, liées à la nature du type d'élément.
On constate que le résultat est bon quand la stylisation s'applique à un bout de texte situé sur une seule ligne : il faut seulement faire attention à ne pas prendre un cadre trop épais qui interférerait avec les lignes du haut et du bas. On constate aussi que le résultat est acceptable pour une portion de texte située sur deux lignes à condition que le début soit à droite de la fin. Dès qu'il commence à y avoir recouvrement, le résultat se dégrade s'il y a un cadre (mais reste acceptable s'il n'y en a pas). La prudence est de rigueur.
Cliquez le bouton pour tester le CSS. Pour réinitialiser, appuyez sur la touche « F5 ».
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat lacus a erat interdum ultricies. Vestibulum sodales turpis est, id maximus odio tincidunt quis. Aliquam tincidunt felis quam, nec suscipit sem dictum sed. Quisque ut est eleifend, ultricies ligula eget, porttitor enim. Suspendisse a elit consectetur, dignissim dui at, ultrices odio. Nulla pulvinar aliquet sapien ut interdum. Vivamus tempor facilisis pellentesque. Donec augue mi, efficitur lacinia laoreet et, aliquet quis felis. Etiam id ex arcu. Praesent ut euismod arcu. Vestibulum mattis commodo nulla quis luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer commodo nunc ac nisl euismod, quis accumsan eros aliquam. Nam at volutpat ipsum. Fusce in facilisis sapien.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat lacus a erat interdum ultricies. Vestibulum sodales turpis est, id maximus odio tincidunt quis. Aliquam tincidunt felis quam, nec suscipit sem dictum sed. Quisque ut est eleifend, ultricies ligula eget, porttitor enim. Suspendisse a elit consectetur, dignissim dui at, ultrices odio. Nulla pulvinar aliquet sapien ut interdum. Vivamus tempor facilisis pellentesque. Donec augue mi, efficitur lacinia laoreet et, aliquet quis felis. Etiam id ex arcu. Praesent ut euismod arcu. Vestibulum mattis commodo nulla quis luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.