La tarea es mostrar un texto de derecha a izquierda usando CSS. Esto se hace con la ayuda de la propiedad Direction de CSS . De forma predeterminada, la alineación del texto se establece en la dirección de izquierda a derecha en el documento HTML. Para mostrar el texto de derecha a izquierda, simplemente establecemos la propiedad de dirección en el valor de «rtl».
Sintaxis:
element_selector {
direction: rtl;
}
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1,
h2 {
color: green;
text-align: center;
}
.rtl {
direction: rtl;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
How to display text
Right-to-Left Using CSS?
</h2>
<p class="rtl">
This text goes from right to left.
</p>
</body>
</html>
Producción:
De derecha a izquierda
Ejemplo 2: en el código anterior, si agregamos más contenido de texto en el elemento «p», obtenemos el siguiente resultado. Observe el efecto en ambos resultados.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1,
h2 {
color: green;
text-align: center;
}
.rtl {
direction: rtl;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
How to display text Right-to-Left Using CSS?
</h2>
<p class="rtl">
This text goes from right to left.
Another line is added.
</p>
</body>
</html>
Producción:
De derecha a izquierda
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA