{"id":6241,"date":"2021-03-04T10:13:46","date_gmt":"2021-03-04T10:13:46","guid":{"rendered":"https:\/\/outstandingthemes.com\/como-contraer-texto-en-html\/"},"modified":"2024-11-27T21:59:26","modified_gmt":"2024-11-27T21:59:26","slug":"como-contraer-texto-en-html","status":"publish","type":"post","link":"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/","title":{"rendered":"C\u00f3mo contraer texto en HTML"},"content":{"rendered":"\n

El texto plegable es quiz\u00e1 el m\u00e1s b\u00e1sico de los esquemas de dise\u00f1o interactivo de tu sitio. Esto te permite enganchar y ojear la visibilidad del texto o contenido haciendo clic en esa etiqueta de contenido. Este art\u00edculo te ayudar\u00e1 a saber c\u00f3mo a\u00f1adir un texto plegable. As\u00ed que, si\u00e9ntate, rel\u00e1jate y sigue leyendo. <\/span><\/p>\n\n

Proceso detallado para a\u00f1adir un texto plegable <\/b><\/h2>\n\n

Los creadores de sitios web que se sientan c\u00f3modos editando HTML pueden a\u00f1adir texto colapsable directamente al widget de texto o a la p\u00e1gina de contenido. Si tienes un lugar en una secci\u00f3n colapsable, puedes editarlo con el uso de la funci\u00f3n <\/span>Editor WYSIWYG<\/span><\/a>. <\/span> <\/p>\n\n

Aumenta el tama\u00f1o de la barra de herramientas WYSIWYG para ver claramente el bot\u00f3n HTML. Una vez que pulses el bot\u00f3n, aparecer\u00e1 una ventana emergente en la que podr\u00e1s editar directamente el texto HTML de tu contenido. <\/span><\/p>\n\n

Todo texto colapsable debe tener un div contenedor que rodee todo el trozo, un encabezado que act\u00fae como organizador y un div de destino que rodee el texto que deseas colapsar. Es vital utilizar las etiquetas correctas, as\u00ed como etiquetas de clase para cada elemento, o de lo contrario el texto colapsado no funcionar\u00e1. <\/span><\/p>\n\n

Puedes utilizar el div con class=\u00bbopenberkeley-collapsible-container\u00bb para el contenedor.<\/span><\/p>\n\n

Puedes utilizar un encabezado (h2, h3, h4 o h5) con class=\u00bbopenberkeley-collapsible-controller\u00bb como controlador.<\/span><\/p>\n\n

Utiliza div con class=\u00bbopenberkeley-collapsible-target\u00bb para el texto de destino.<\/span><\/p>\n\n

Puedes copiar y pegar el c\u00f3digo de ejemplo que aparece a continuaci\u00f3n en las ventanas de edici\u00f3n de HTML. A\u00f1ade el texto aunque ya haya HTML en la ventana; s\u00f3lo tienes que asegurarte de copiar y pegar el c\u00f3digo en la posici\u00f3n correcta. <\/span><\/p>\n\n

En el c\u00f3digo de ejemplo que aparece a continuaci\u00f3n, intercambia el texto de la etiqueta <h2> (el encabezamiento del controlador), as\u00ed como el de la etiqueta <p> (contenido de destino del p\u00e1rrafo) con el texto colapsado.<\/span><\/p>\n\n

Ejemplo<\/b><\/a><\/h2>\n\n
<textarea style=\"width:100%;min-height:500px;\">\n<div class=\"openberkeley-collapsible-container\">\n<h2 class=\"openberkeley-collapsible-controller\">Line of collapsible text<\/h2>\n<div class=\"openberkeley-collapsible-target\">\n<p>In hac habitasse platea dictumst. Suspendisse dictum, velit vel vehicula gravida,\nturpis nulla dignissim nibh, a tristique enim dui vestibulum enim. Duis cursus\neuismod diam vitae gravida. Etiam a purus lorem.<\/p>\n<\/div>\n<\/div>\n<div class=\"openberkeley-collapsible-container\">\n<h2 class=\"openberkeley-collapsible-controller\">Another line of collapsible text<\/h2>\n<div class=\"openberkeley-collapsible-target\">\n<p>Here is another paragraph that will expand. It can be long or short. You can add any formatting and layout you want to a collapsible item. For example:<\/p>\n<h3>Here is a subheading<\/h3>\n<p>More text.<\/p>\n<table>\n<tbody>\n<tr><th>Table header<\/th><th>Table header 2<\/th><\/tr>\n<tr>\n<td>Content of table<\/td>\n<td>More content of table<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2>No longer expanding!<\/h2>\n<p>This stuff is just regular.<\/p>\n<\/textarea><\/code><\/pre>\n\n
Cuando hayas terminado, pulsa el bot\u00f3n Actualizar. Aqu\u00ed ver\u00e1s reflejadas tus modificaciones en el editor WYSIWYG. <\/p>\n\n
Cada objetivo y controlador se mostrar\u00e1 en el editor con un borde punteado o discontinuo. Los bordes no se mostrar\u00e1n si ves la p\u00e1gina web guardada. Si has hecho un texto plegable en la ventana emergente HTMP, estos bordes te ayudar\u00e1n a editar el contenido m\u00e1s adelante sin necesidad de abrir la vista HTML.  <\/p>\n\n
Cuando entres en la p\u00e1gina web, todo el texto empezar\u00e1 a contraerse. Para expandirlo, pulsa el encabezamiento del controlador. La tarea de colapso se ha probado para la accesibilidad. Funciona muy bien tanto para los lectores de pantalla como para los usuarios que s\u00f3lo utilizan el teclado.   <\/p>\n\n
Contraer todo<\/h2>\n\n
Si lo deseas, puedes poner enlaces para contraer los textos a la vez. S\u00f3lo tienes que hacer clic en el editor HTML y luego pegar el c\u00f3digo antes del elemento colapsable inicial. <\/p>\n\n
Esto tendr\u00e1 el siguiente aspecto:  
<\/a><\/div><\/p>\n\n
S\u00f3lo puede haber un \u00fanico conjunto de enlaces de colapso para cada p\u00e1gina.<\/p>\n\n
C\u00f3mo editar texto plegable<\/h2>\n\n
Despu\u00e9s de insertar un texto colapsable, no hay necesidad de volver a HTML para hacer alguna edici\u00f3n. El editor HTML WYSIWYG editar\u00e1 el contenido de tu encabezado as\u00ed como el texto colapsable. Aqu\u00ed ver\u00e1s un trazo discontinuo en la zona del encabezado y un trazo punteado alrededor del texto plegable. Esto es adem\u00e1s de la forma en que aparece en la vista p\u00fablica de tu p\u00e1gina web que variar\u00e1 dependiendo del tema que utilices para tu sitio. Estos contornos te permitir\u00e1n ver si el texto est\u00e1 fuera o dentro del trozo plegable.    <\/p>\n\n
Para una visualizaci\u00f3n notable, aseg\u00farate de que el texto de tu encabezamiento sea breve o corto.<\/h2>\n\n
Una vez que el texto colapsable es lo \u00faltimo en el contenido de la p\u00e1gina, es dif\u00edcil incluir texto no colapsable bajo \u00e9l sin necesidad de firmar en c\u00f3digo HTML. Cuando edites el texto HTML, aseg\u00farate de dejar una etiqueta 
 vac\u00eda a continuaci\u00f3n del \u00faltimo impuesto colapsable. Los mismos problemas pueden tener lugar si intentas incluir texto no colapsable entre dos elementos que son colapsables o cuando intentas eliminar el texto colapsable. Para realizar con \u00e9xito estas alteraciones, aseg\u00farate de visitar el modo HTML.   <\/p><\/p>\n\n
S\u00f3lo hay un conjunto de colapsables para cada p\u00e1gina. Los enlaces funcionan bien en textos que son plegables a pesar de d\u00f3nde se encuentren en tu p\u00e1gina. Por ello, se recomienda encarecidamente que evites colocar textos plegables en muchos paneles de una p\u00e1gina.  <\/p>\n\n
Pros A\u00f1adir textos plegables<\/h2>\n\n
Una ventaja de contraer el texto es que tu encabezamiento se convierte en elementos de borde, proporcionando a los usuarios una impresi\u00f3n del texto disponible sin necesidad de desplazarse casi tanto.<\/p>\n\n
A\u00f1adir texto plegable a tu p\u00e1gina ofrece interactividad, al tiempo que te permite incluir m\u00e1s texto en tu sitio.<\/p>\n\n
Otra ventaja es que quienes utilizan teclados no necesitan pisar los factores enfocables de la p\u00e1gina de inicio para ir al lugar que desean.<\/p>\n\n
Conclusi\u00f3n<\/h2>\n\n
\u00bfEs el texto colapsable la mejor forma y la m\u00e1s fiable para la documentaci\u00f3n de ayuda, o s\u00f3lo presenta m\u00e1s problemas y preocupaciones?<\/p>\n\n
En conjunto, el texto plegable ofrece una gran ventaja a la hora de ordenar el texto o el contenido y debe seguirse a pesar de algunos defectos. Un texto plegable puede hacer lo siguiente: <\/p>\n\n
Esto comprime mucha informaci\u00f3n vital en un lugar peque\u00f1o que los lectores pueden escanear r\u00e1pidamente.<\/p>\n\n
Esto tambi\u00e9n oculta la extensi\u00f3n de la informaci\u00f3n, por lo que el texto parecer\u00e1 m\u00e1s ligero y sencillo a los lectores y usuarios. Hasta que ampl\u00eden las secciones para saber cu\u00e1nto texto hay. <\/p>\n\n
Esto tambi\u00e9n te permite integrar el texto de forma que se modifique seg\u00fan las necesidades de los usuarios. Cuando los lectores necesiten m\u00e1s detalles, s\u00f3lo tendr\u00e1n que ir al enlace para saber y leer m\u00e1s. <\/p>\n\n
Esto tambi\u00e9n permite a los lectores interrelacionarse con el texto, de modo que eligen lo que les gusta saber.<\/p>\n\n
Cuando pasas a p\u00e1ginas largas, colapsar los textos puede ser una victoria notable tanto para la usabilidad como para la navegaci\u00f3n.<\/p>\n\n
Sin embargo, tambi\u00e9n tiene algunos inconvenientes, como que si un lector busca una frase clave enterrada dentro del texto colapsado, puede confundirse al no encontrar la frase clave resaltada en la p\u00e1gina web, ya que el texto colapsado permanece colapsado incluso en los resultados de una b\u00fasqueda.<\/p>\n","protected":false},"excerpt":{"rendered":"El texto plegable es quiz\u00e1 el m\u00e1s b\u00e1sico de los esquemas de dise\u00f1o interactivo de tu sitio. Esto…","protected":false},"author":7829,"featured_media":6242,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[689,705,697],"tags":[],"yoast_head":"\nC\u00f3mo contraer texto en HTML - Outstanding Themes<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo contraer texto en HTML - Outstanding Themes\" \/>\n<meta property=\"og:description\" content=\"El texto plegable es quiz\u00e1 el m\u00e1s b\u00e1sico de los esquemas de dise\u00f1o interactivo de tu sitio. Esto…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Outstanding Themes\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-04T10:13:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-27T21:59:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2021\/03\/pexels-photo-270404.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"562\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"outstandingthemes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"outstandingthemes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/\",\"url\":\"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/\",\"name\":\"C\u00f3mo contraer texto en HTML - Outstanding Themes\",\"isPartOf\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2021\/03\/pexels-photo-270404.jpg\",\"datePublished\":\"2021-03-04T10:13:46+00:00\",\"dateModified\":\"2024-11-27T21:59:26+00:00\",\"author\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a\"},\"breadcrumb\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/#primaryimage\",\"url\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2021\/03\/pexels-photo-270404.jpg\",\"contentUrl\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2021\/03\/pexels-photo-270404.jpg\",\"width\":1000,\"height\":562},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/outstandingthemes.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo contraer texto en HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/#website\",\"url\":\"https:\/\/outstandingthemes.com\/es\/\",\"name\":\"Outstanding Themes\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/outstandingthemes.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a\",\"name\":\"outstandingthemes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g\",\"caption\":\"outstandingthemes\"},\"url\":\"https:\/\/outstandingthemes.com\/es\/author\/outstandingthemes\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo contraer texto en HTML - Outstanding Themes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo contraer texto en HTML - Outstanding Themes","og_description":"El texto plegable es quiz\u00e1 el m\u00e1s b\u00e1sico de los esquemas de dise\u00f1o interactivo de tu sitio. Esto…","og_url":"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/","og_site_name":"Outstanding Themes","article_published_time":"2021-03-04T10:13:46+00:00","article_modified_time":"2024-11-27T21:59:26+00:00","og_image":[{"width":1000,"height":562,"url":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2021\/03\/pexels-photo-270404.jpg","type":"image\/jpeg"}],"author":"outstandingthemes","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"outstandingthemes","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/","url":"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/","name":"C\u00f3mo contraer texto en HTML - Outstanding Themes","isPartOf":{"@id":"https:\/\/outstandingthemes.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/#primaryimage"},"image":{"@id":"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/#primaryimage"},"thumbnailUrl":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2021\/03\/pexels-photo-270404.jpg","datePublished":"2021-03-04T10:13:46+00:00","dateModified":"2024-11-27T21:59:26+00:00","author":{"@id":"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a"},"breadcrumb":{"@id":"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/#primaryimage","url":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2021\/03\/pexels-photo-270404.jpg","contentUrl":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2021\/03\/pexels-photo-270404.jpg","width":1000,"height":562},{"@type":"BreadcrumbList","@id":"https:\/\/outstandingthemes.com\/es\/como-contraer-texto-en-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/outstandingthemes.com\/es\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo contraer texto en HTML"}]},{"@type":"WebSite","@id":"https:\/\/outstandingthemes.com\/es\/#website","url":"https:\/\/outstandingthemes.com\/es\/","name":"Outstanding Themes","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/outstandingthemes.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a","name":"outstandingthemes","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g","caption":"outstandingthemes"},"url":"https:\/\/outstandingthemes.com\/es\/author\/outstandingthemes\/"}]}},"_links":{"self":[{"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/posts\/6241"}],"collection":[{"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/users\/7829"}],"replies":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/comments?post=6241"}],"version-history":[{"count":1,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/posts\/6241\/revisions"}],"predecessor-version":[{"id":6243,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/posts\/6241\/revisions\/6243"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/media\/6242"}],"wp:attachment":[{"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/media?parent=6241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/categories?post=6241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/tags?post=6241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}