{"id":1394,"date":"2024-08-01T19:42:25","date_gmt":"2024-08-01T17:42:25","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1394"},"modified":"2024-08-01T19:42:26","modified_gmt":"2024-08-01T17:42:26","slug":"08-efectos-de-texto-con-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-avanzado\/08-efectos-de-texto-con-css\/","title":{"rendered":"08. Efectos de texto con CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">En este cap\u00edtulo podremos aprender m\u00e1s acerca de las siguientes propiedades:<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>text-overflow<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>word-wrap<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>word-break<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>writing-mode<\/em><\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">text-overflow<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La propiedad <strong><em>text-overflow<\/em><\/strong> especifica c\u00f3mo se debe se\u00f1alar al usuario el contenido desbordado que no se muestra.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se puede recortar<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"234\" height=\"43\" src=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/08\/Efectos-de-texto-con-CSS-1.png\" alt=\"\" class=\"wp-image-1396\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">o puede representarse como puntos suspensivos (&#8230;):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"236\" height=\"40\" src=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/08\/Efectos-de-texto-con-CSS-2.png\" alt=\"\" class=\"wp-image-1397\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html lang=\"es\"><br>  &lt;head><br>    &lt;style><br>      p.text1 {<br>        white-space: nowrap;<br>        width: 200px;<br>        border: 1px solid #000000;<br>        overflow: hidden;<br>        text-overflow: clip;<br>      }<br><br>      p.text2 {<br>        white-space: nowrap;<br>        width: 200px;<br>        border: 1px solid #333333;<br>        overflow: hidden;<br>        text-overflow: ellipsis;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h2>La propiedad text-overflow&lt;\/h2><br>    &lt;p class=\"text1\">Este es un texto largo que no cabe en el cuadro&lt;\/p><br><br>    &lt;h2>text-overflow: ellipsis;&lt;\/h2><br>    &lt;p class=\"text2\">Este es un texto largo que no cabe en el cuadro&lt;\/p><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">word-wrapping<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La propiedad <strong><em>word-wrapping<\/em><\/strong> permite que las palabras largas se puedan dividir y pasar a la siguiente l\u00ednea. Si una palabra es demasiado larga para caber dentro de un \u00e1rea, se expande hacia afuera:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"368\" height=\"179\" src=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/08\/Efectos-de-texto-con-CSS-3.png\" alt=\"\" class=\"wp-image-1398\" srcset=\"https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/08\/Efectos-de-texto-con-CSS-3.png 368w, https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/08\/Efectos-de-texto-con-CSS-3-300x146.png 300w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">La propiedad <strong><em>word-wrap<\/em><\/strong> permite forzar el ajuste del texto, incluso si eso significa dividirlo en medio de una palabra:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"188\" height=\"201\" src=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/08\/Efectos-de-texto-con-CSS-4.png\" alt=\"\" class=\"wp-image-1399\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      p.test {<br>        width: 11em;<br>        border: 1px solid #000000;<br>        word-wrap: break-word;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h1>The word-wrap Property&lt;\/h1><br><br>    &lt;p class=\"test\"><br>      This paragraph contains a very long word:<br>      thisisaveryveryveryveryveryverylongword. The long word will break and wrap<br>      to the next line.<br>    &lt;\/p><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">word-breaking<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La propiedad <strong><em>word-breaking<\/em><\/strong> especifica reglas de salto de l\u00ednea.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"172\" height=\"268\" src=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/08\/Efectos-de-texto-con-CSS-5.png\" alt=\"\" class=\"wp-image-1400\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      p.test1 {<br>        width: 140px;<br>        border: 1px solid #000000;<br>        word-break: keep-all;<br>      }<br><br>      p.test2 {<br>        width: 140px;<br>        border: 1px solid #000000;<br>        word-break: break-all;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h1>The word-break Property&lt;\/h1><br>    &lt;p class=\"test1\"><br>      This paragraph contains some text. This line will-break-at-hyphens.<br>    &lt;\/p><br><br>    &lt;p class=\"test2\"><br>      This paragraph contains some text. The lines will break at any character.<br>    &lt;\/p><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">writing-mode<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La propiedad <strong><em>writing-mode<\/em><\/strong> especifica si las l\u00edneas de texto se disponen horizontal o verticalmente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      p.test1 {<br>        writing-mode: horizontal-tb;<br>      }<br><br>      span.test2 {<br>        writing-mode: vertical-rl;<br>      }<br><br>      p.test2 {<br>        writing-mode: vertical-rl;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h1>The writing-mode Property&lt;\/h1><br>    &lt;p class=\"test1\">Some text with default writing-mode.&lt;\/p><br>    &lt;p><br>      Some text with a span element with a<br>      &lt;span class=\"test2\">vertical-rl&lt;\/span> writing-mode.<br>    &lt;\/p><br>    &lt;p class=\"test2\">Some text with writing-mode: vertical-rl.&lt;\/p><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Resumen<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Propiedad<\/th><th>Descripci\u00f3n<\/th><\/tr><tr><td><strong><em>text-justify<\/em><\/strong><\/td><td>Especifica c\u00f3mo debe alinearse y espaciarse el texto justificado<\/td><\/tr><tr><td><strong><em>text-overflow<\/em><\/strong><\/td><td>Especifica c\u00f3mo se debe se\u00f1alar al usuario el contenido desbordado que no se muestra<\/td><\/tr><tr><td><strong><em>word-break<\/em><\/strong><\/td><td>Especifica reglas de salto de l\u00ednea para scripts que no son CJK<\/td><\/tr><tr><td><strong><em>word-wrap<\/em><\/strong><\/td><td>Permite que las palabras largas puedan dividirse y pasar a la siguiente l\u00ednea<\/td><\/tr><tr><td><strong><em>writing-mode<\/em><\/strong><\/td><td>Especifica si las l\u00edneas de texto se disponen horizontal o verticalmente<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>En este cap\u00edtulo podremos aprender m\u00e1s acerca de las siguientes propiedades:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1367,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1394","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En este cap\u00edtulo podremos aprender m\u00e1s acerca de las siguientes propiedades:","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1394"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1394\/revisions"}],"predecessor-version":[{"id":1401,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1394\/revisions\/1401"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1367"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}