Home / Questions / 74849
Accepted
simon
Asked: 2020-06-01 13:40:01 +0800 CST 2020-06-01 13:40:01 +0800 CST

How to justify a text aligned to the left or right with CSS?

  • 772

Hello friends, I have this following code that works correctly, but when I want to justify the text, everything is centered on itself and it is not placed on the left and right.

Is there any CSS property to be able to justify the text when it is on the right and left?

My code:

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>

css

1 Answers

  1. Best Answer

    You could use the CSS property directionto indicate the direction of the text: rtl(right to left)or ltr(left to right)which combined with text-align: justifywould have the effect you want.

    Your corrected example:

    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>

    • 6