La palabra-break propiedad en CSS

CSS | palabra- class Propiedad : Aquí, vamos a aprender acerca de la palabra- break propiedad con su sintaxis y ejemplos de CSS (Cascading Style Sheet).

CSS | palabra- break Propiedad

Introducción:

Diseño, desarrollo y edición va de la mano, mientras que la creación de una página web o sitio web. Prestando atención a cada elemento como una cuadrícula, contenedores, textos, etc es muy crucial para construir un sitio web de respuesta que atraería a muchos usuarios. Por lo tanto, cualquier desarrollador web profesional podría prestar la máxima atención a cada uno de estos aspectos y cualquier principiante debe tener en cuenta estos aspectos para reactivar su experiencia de desarrollo web.

Síntesis:

¿Cuál es el elemento más fundamental que viene a la mente cuando se está considerando el desarrollo de una página web? ¡Palabras! Si ese era su respuesta, después acariciar a sí mismo, porque ya está al tanto de lo que vamos a discutir en este artículo. Aquí la discusión se centrará en el aspecto más fundamental del desarrollo web que es “tratar con las palabras” . Pero lo que realmente vamos a discutir acerca de las palabras aquí? Esa propiedad se conoce como palabra- break propiedad en CSS y entender que veamos la definición.

Definición:

El palabra- break propiedad en CSS se utiliza para especificar cómo las palabras se van a break cuando llegan al final de una línea. Sí, has oído bien, una propiedad muy simple con una función muy básica. Usted puede decidir cómo sus palabras van a break cuando llegan al final de una línea, se puede especificar que break de cualquier alfabeto, letra o palabra. Esta propiedad puede sonar muy fácil, pero necesita ser implementado muy sabiamente ya que esta propiedad podría desempeñar un papel importante en cómo aparecerá su página web o sitio web a los usuarios. Sintaxis CSS le ayudará a obtener una mejor idea de la propiedad.

Sintaxis:

    Element{
word-break: normal|break-all|keep-all|break-word;
}

Ahora, hay ciertos valores que son absorbidos por el palabra- break propiedad . Veamos uno por uno.

1) palabra- break: break -todas

La primera y principal valor de la propiedad palabra- break es la break -todas valor. Este valor como su nombre indica ayuda a romper las palabras en cualquier carácter y que impide de nuevo desbordamiento.

Sintaxis:

    Element{
word-break:break-all;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 180px;
border: 1px solid #f40;
word-break: break-all;
}
</style>
</head>
<body>
<h1>The word-break Property</h1>
<h2> break-all</h2>
<p>This is IncludeHelp.ThisisIncludeHelp.This is IncludeHelp.This is IncludeHelp.</p>
</body>
</html>

salida

The word-break Property in CSS - 4

En el ejemplo anterior, la palabra se rompe a la anchura de la caja y previene el desbordamiento.

2) palabra- class: Largo

El valor normal de la palabra- break propiedad puede ser denominado como una propiedad break. Este valor cuando está activada, pero no hace nada usos class reglas break línea.

Sintaxis:

    Element{
word-break:normal;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 180px;
border: 1px solid #f40;
word-break: normal;
}
</style>
</head>
<body>
<h1>The word-break Property</h1>
<h2> normal</h2>
<p>This is IncludeHelp.ThisisIncludeHelp.This is IncludeHelp.This is IncludeHelp.</p>
</body>
</html>

salida

The word-break Property in CSS - 5

En el ejemplo anterior, la palabra utiliza las reglas break línea break.

3) palabra- class: keep-toda

La función de la mantener todo valor es un poco diferente de los otros valores como este valor indica que la palabra se rompe no se utilizarán break chino / / japonés coreano (CJK) de texto. el comportamiento de texto CJK no será el mismo que el valor normal.

Sintaxis:

    Element{
word-break:keep-all;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 180px;
border: 1px solid #f40;
word-break: keep-all;
}
</style>
</head>
<body>
<h1>The word-break Property</h1>
<h2> keep-all</h2>
<p>This is IncludeHelp.ThisisIncludeHelp.This is IncludeHelp.This is IncludeHelp.</p>
</body>
</html>

salida

The word-break Property in CSS - 6

En el ejemplo anterior, es el mismo que el valor normal de la propiedad default palabra- .

4) palabra- default: break -word

El último pero no menos importante, la break -word valor se utiliza para evitar desbordamiento pero aquí palabra puede romperse en los puntos arbitrarios.

Sintaxis:

    Element{
word-break:break-word;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 180px;
border: 1px solid #f40;
word-break: break-word;
}
</style>
</head>
<body>
<h1>The word-break Property</h1>
<h2>break-word</h2>
<p>This is IncludeHelp.ThisisIncludeHelp.This is IncludeHelp.This is IncludeHelp.</p>
</body>
</html>

salida

The word-break Property in CSS - 7

En el ejemplo anterior, la propiedad -word class se utiliza para evitar desbordamiento.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *