Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS Typography Word-Break se utiliza para dividir las líneas y palabras del texto cuando el ancho de la línea excede el contenedor. Hay dos tipos de romper la palabra. Use la clase wb-break-word para dividir solo las palabras largas cuando excedan la longitud de la línea. Use la clase wb-break-all para dividir todas las palabras cuando las palabras se encuentran al final de la línea.
En este artículo, discutiremos Primer CSS Typography Word-Break.
Primer CSS Typography Word-Break clases:
- wb-break-word: esta clase se usa para dividir solo palabras largas.
- wb-break-all: Esta clase se utiliza para dividir todas las palabras que se encuentran al final de la línea.
Sintaxis :
<p class="Word-Break-Class">
...
</p>
Ejemplo 1: Este ejemplo demuestra la implementación de Primer CSS Typography Word-Break utilizando la clase wb-break-word .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Typography Word-Break </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body class="m-2"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Typography Word-Break </h3> <br> <p class="wb-break-word col-2 border"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </p> </body> </html>
Producción:
Ejemplo 2: Este ejemplo demuestra la implementación de Primer CSS Typography Word-Break usando la clase wb-break-all .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Typography Word-Break </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body class="m-2"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Typography Word-Break </h3> <br> <p class="wb-break-all col-2 border"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </p> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/typography#word-break
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA