-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtext-wrap.html
149 lines (133 loc) · 9.71 KB
/
text-wrap.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap" rel="stylesheet">
<link href="../estilos/style.css" rel="stylesheet">
<link href="./estilos/articulo.css" rel="stylesheet">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WFELBG80ZH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WFELBG80ZH');
</script>
<link rel="apple-touch-icon" sizes="180x180" href="./favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon_io/code-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon_io/code-32x32.png">
<title>Rodrigo Juarez 🧑🏻💻</title>
</head>
<body>
<header class="header">
<nav class="header-nav bd-grid">
<div class="header-nav__logo">
<a href="index.html" class="logo">Rodrigo Juarez</a>
</div>
<div class="header-nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="index.html#home" class="nav__link">Home</a>
</li>
<li class="nav__item">
<a href="index.html#about" class="nav__link">Sobre mi</a>
</li>
<li class="nav__item">
<a href="index.html#skills" class="nav__link">Skills</a>
</li>
<li class="nav__item">
<a href="index.html#portfolio" class="nav__link">Portfolio</a>
</li>
<li class="nav__item">
<a href="index.html#contact" class="nav__link">Contacto</a>
</li>
<!-- <li class="nav__item">
<a href="index.html#blog" class="nav__link">Blog</a>
</li> -->
<li class="nav__item">
<a href="index.html#blog" class="nav__link active">Articulos</a>
</li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-menu'></i>
</div>
</nav>
</header>
<div id="progress-bar"></div>
<main class="l-main">
<section class="article-section">
<h2 class="article-title">CSS text-wrap</h2>
<p class="paragraph">
Una de las afirmaciones que podemos hacer sin ningún tipo de duda, es que CSS como lenguaje de estilado, en estos últimos meses ha estado sufriendo una serie de actualizaciones que justamente permite que podamos contar con funcionalidades nativas que son de mucha utilidad. Es por eso que en este breve artículo queremos analizar un nuevo valor que se suma a la propiedad text-wrap.
</p>
<p class="paragraph">
Pero, antes de comenzar a explicar más sobre esta novedad, repasemos un poco sobre esta propiedad.
</p>
<h3 class="section-title">
¿Qué es text-wrap? 🤔
</h3>
<p class="paragraph">
text-wrap es una propiedad que tiene como principal objetivo ajustar un determinado texto dentro de un elemento. Es por eso que tiene valores que posicionan el elemento de texto de determinadas maneras. Veamos algunos valores que podemos usar:
</p>
<h3 class="section-title">text-wrap: wrap</h3>
<p class="paragraph">Este es el valor por defecto, y nos permite es poder ajustar el salto del texto para evitar el desbordamiento en proporción a su elemento contenedor. Veamos un ejemplo.</p>
<figure class="container-image">
<img src="./imagenes/Articulos/Text_Wrap/Text Wrap.png" alt="log" class="image" loading="lazy" style="width: 70%;">
</figure>
<h3 class="section-title">text-wrap: nowrap</h3>
<p class="paragraph">En este caso, esta propiedad permite que el texto se ajuste o posicione sin evitar el desbordamiento, en el caso de que su elemento contenedor sea menor a las proporciones del mismo.</p>
<figure class="container-image">
<img src="./imagenes/Articulos/Text_Wrap/Text Nowrap.png" alt="log" class="image" loading="lazy" style="width: 70%;">
</figure>
<h3 class="section-title">text-wrap: balance</h3>
<p class="paragraph">Esta propiedad, como su nombre lo indica, lo que permite es que los textos estén balanceados, y equilibrados buscando la mejor solución de ajuste de linea, teniendo en cuenta el tamaño de la fuente, el idioma, o el área designada. Lo que se traduce en facilidad de lectura al usuario. Veamos un ejemplo: </p>
<figure class="container-image">
<img src="./imagenes/Articulos/Text_Wrap/Text Balance.png" alt="log" class="image" loading="lazy" style="width: 70%;">
</figure>
<p class="paragraph">⚠️ <strong>Nota importante:</strong> Este es un nuevo valor, que está disponible a partir de la versión 114 de Chrome. Si bien no tiene soporte en todos los navegadores web, contamos con la filosofía de Progressive Enhancement (Mejora Progresiva). Esto implica que los usuarios que cuenten con la versión correspondiente que brinden soporte a esta funcionalidad, podrán ver reflejados los cambios. En el caso de que no sea posible, sencillamente la funcionalidad no se vera reflejada. Es por eso que puedes mirar el soporte actualizado en esta <a href="https://caniuse.com/css-text-wrap-balance">pagina</a></p>
<h3 class="section-title">Limitantes a tener en cuenta</h3>
<p class="paragraph">Como la tarea de equilibrar los textos requiere que el navegador busque la mejor manera de poder hacerlo, esto obviamente tiene un coste. Es por eso que esta propiedad se podrá aplicar con la condicional de que sean 6 líneas o menos en el elemento. En el caso de que este número sea superado, no será aplicada esta propiedad.</p>
<p class="paragraph">Si tenemos en cuenta de que aplicar esta propiedad requiere un coste por parte del navegador, es recomendable poder usarlo con prudencia y siendo conscientes en que parte de nuestra página lo aplicaremos.</p>
<h3 class="section-title">Conclusión</h3>
<p class="paragraph">Sin dudas, mantenerse al día en cuanto a novedades que van siguiendo en lenguajes, como CSS, es todo un desafío. Los cambios en tecnologías web, son constantes y dinámicos, por lo que mantenerse actualizado en nuevas herramientas, técnicas y estándares de codificación nos ayuda a ser más versátiles y eficientes como desarrolladores. </p>
<p class="paragraph">Desde ya muchas gracias por llegar hasta acá.</p>
<p class="paragraph">Happy Coding !! 👨🏻💻👩🏻💻</p>
</section>
</main>
<footer class="footer section">
<div class="footer__container bd-grid">
<div class="footer__data">
<h2 class="footer__title">RODRIGO JUAREZ</h2>
<p class="footer__text">Espero que hayas disfrutado mi website. Si deseas compartir tu feedback, no dudes en contactarme.</p>
<h2 class="footer__title">
<a href='https://cafecito.app/rodrijuarez' rel='noopener' target='_blank'><img srcset='https://cdn.cafecito.app/imgs/buttons/button_5.png 1x, https://cdn.cafecito.app/imgs/buttons/button_5_2x.png 2x, https://cdn.cafecito.app/imgs/buttons/button_5_3.75x.png 3.75x' src='https://cdn.cafecito.app/imgs/buttons/button_5.png' alt='Invitame un café en cafecito.app' /></a>
</h2>
</div>
<div class="footer__data">
<h2 class="footer__title">EXPLORE</h2>
<ul>
<li><a href="index.html#home" class="footer__link">Home</a></li>
<li><a href="index.html#about" class="footer__link">Sobre mi</a></li>
<li><a href="index.html#skills" class="footer__link">Skills</a></li>
<li><a href="index.html#portfolio" class="footer__link">Portfolio</a></li>
<li><a href="index.html#contact" class="footer__link">Contacto</a></li>
<li><a href="index.html#articles" class="footer__link">Articulos</a></li>
</ul>
</div>
<div class="footer__data">
<h2 class="footer__title">FOLLOW</h2>
<a href="https://www.linkedin.com/in/rodrijuarez/" class="about__social-icon"><i class='bx bxl-linkedin' ></i></a>
<a href="https://github.com/RodriJOk" class="about__social-icon"><i class='bx bxl-github' ></i></a>
<a href="https://www.instagram.com/preguntastech" class="about__social-icon"><i class='bx bxl-instagram' ></i></a>
</div>
</div>
</footer>
<script src="../javascript.js"></script>
</body>
</html>