Hay varios métodos para sangrar la segunda línea del párrafo que se pueden lograr de muchas maneras. Algunos de los métodos para lograr esto se describen a continuación con el código y la salida adecuados. Ahora se puede hacer algo de estilo usando CSS de varias maneras para sangrar la segunda línea según sea necesario.
Nota: De manera predeterminada, cuando las líneas se ajustan, comienzan justo debajo de donde comenzó la línea anterior. Echa un vistazo a lo siguiente para ver esto en acción:
Sintaxis:
/* length values */ text-indent: 3mm; text-indent: 40px; /* percentage value relative to the containing block width */ text-indent: 15%; /* Keyword values */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* Global values */ text-indent: inherit; text-indent: initial; text-indent: unset;
< Método 1: en este ejemplo, la primera línea de texto no tiene sangría, pero las líneas subsiguientes desde la segunda línea tienen sangría para que la primera línea no se mueva. En este ejemplo, se logra estableciendo text-indent en -36px y padding-left value en 36px. En este ejemplo, la etiqueta div inicial contiene la siguiente información de estilo como atributos.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Set indent in second line of paragraph
</title>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
h2 {
text-align: center;
}
div.a {
text-indent: -36px;
padding-left: 36px;
}
</style>
</head>
<body>
<h2><u>GEEKS FOR GEEKS</u></h2>
<div class="a">
<p>
He started with <a href="https://www.geeksforgeeks.org/">
<b>Geeks for Geeks</b></a> as just a blog based site with
articles on programming questions, then later on expanded
to courses and now is a portal covering programming
questions, interview experiences and even a coding platform
taking inspiration from other competitive coding sites.
</p>
</div>
</body>
</html>
Producción:
Método 2: al hacer que la posición sea relativa a la primera línea, establezca la sangría de texto en -26 px y el valor de relleno izquierdo en 26 px. Aquí, en este ejemplo, hemos hecho la posición de la segunda línea relativa a la primera línea. Entonces, la segunda línea está sangrada/alineada de acuerdo con la primera línea.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Set indent in second line of paragraph
</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<style>
body {
margin: 15px;
font-family: Times New Roman;
}
#container {
margin: 0 auto;
max-width: 500px;
}
#container p {
border-top: solid 3px #808080;
margin: 0;
padding-top: 15px;
font-size: 1.4em;
font-weight: 100;
line-height: 1.6em;
}
#container h1 span {
color: #008000;
}
#container h1 {
text-indent: -26px;
padding-left: 26px;
}
</style>
</head>
<body>
<div id="container">
<h1>
<span>#</span>
GeeksforGeeks :: A computer Science Portal For Geeks
</h1>
<p>He started with <a href="https://www.geeksforgeeks.org/">
<b>Geeks for Geeks</b></a> as just a blog based site
with articles on programming questions, then later
on expanded to courses and now is a portal covering
programming questions, interview experiences and even
a coding platform taking inspiration from other
competitive coding sites.
</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por mohitgouti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA