2

Hola amigos tengo este siguiente codigo que funciona correctamente pero cuando quiero justifiar el texto todo se centra en si y no se pone a la izquierda y derecha.

Existe alguna propiedad CSS para poder justificar el texto cuando este a la derecha y izquierda ?

Mi codigo:

body,
html{
/*
	height:100%;
	width:100%;
	position:relative;
	background-image:url(https://rolandocaldas.com/wp-content/uploads/2013/05/css3.png),
	url(https://rolandocaldas.com/wp-content/uploads/2013/05/css3.png);
	background-repeat:no-repeat,no-repeat;
    background-position:top left , top right;
*/
}

.texto1{
	font-style:normal;
	/*HERMOSA PROPIEDAD CSS*/
	font-variant:small-caps;/*CAMBIA TODO A MAYUSCULA Y LE PONE UN ESTILO TIPO LIBRO*/
    /*font-weight:lighter;/*normal,bold,ligh,lighter,100-900*/
    font-size:100%;
    line-height:30px;/*Separa cada linea de texto  de la otra que sigue*/
    font-family:arial;
    text-align:right;



}

.texto2{

	font:italic small-caps 400 100%/30px arial;
	text-align:left;


}
<!DOCTYPE html>
<html>
<head>
	<title>Index</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>


<p class="texto1">
	
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

<p class="texto2">
	
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>



</body>
</html>

1 respuesta 1

6

Podrías usar la propiedad de CSS direction para indicar la dirección del texto: rtl(right to left) o ltr(left to right) que combinado con text-align: justify haría el efecto que quieres.

Tu ejemplo corregido:

body,
html{
/*
	height:100%;
	width:100%;
	position:relative;
	background-image:url(https://rolandocaldas.com/wp-content/uploads/2013/05/css3.png),
	url(https://rolandocaldas.com/wp-content/uploads/2013/05/css3.png);
	background-repeat:no-repeat,no-repeat;
    background-position:top left , top right;
*/
}

.texto1{
	font-style:normal;
	/*HERMOSA PROPIEDAD CSS*/
	font-variant:small-caps;/*CAMBIA TODO A MAYUSCULA Y LE PONE UN ESTILO TIPO LIBRO*/
    /*font-weight:lighter;/*normal,bold,ligh,lighter,100-900*/
    font-size:100%;
    line-height:30px;/*Separa cada linea de texto  de la otra que sigue*/
    font-family:arial;
    direction: rtl;
    text-align: justify;


}

.texto2{

	font:italic small-caps 400 100%/30px arial;
	direction:ltr;
  text-align: justify;


}
<!DOCTYPE html>
<html>
<head>
	<title>Index</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>


<p class="texto1">
	
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

<p class="texto2">
	
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>



</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.