Las tablas en HTML son elementos absurdos. No es una tarea fácil aplicar propiedades CSS a un elemento de tabla. Al ser un elemento altamente estructurado, las propiedades CSS a veces se pierden en la jerarquía de la estructura. También es muy probable que el contenido de la tabla cambie la estructura o las dimensiones de la tabla. Por ejemplo, las palabras largas que residen en las celdas de la tabla pueden hacer que aumente el ancho de la celda. Si soluciona ese problema, puede suceder que las palabras largas crucen los límites de la celda. Podemos evitar esto realizando ajuste de línea en los datos de la celda.
Hay dos métodos para envolver el contenido de la celda de la tabla <td> usando CSS que se detallan a continuación:
- Uso de la propiedad de ajuste de palabras: esta propiedad se usa para permitir que las palabras largas se dividan y pasen a la siguiente línea.
- Uso de la propiedad de separación de palabras: esta propiedad se utiliza para especificar cómo dividir la palabra cuando llega al final de la línea. Los saltos de línea en el texto pueden ocurrir en ciertos espacios, como cuando hay un espacio o un guión.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to wrap table cell
td content using CSS?
</title>
<style>
h1, h3 {
text-align: center;
}
table {
border-spacing: 0px;
table-layout: fixed;
margin-left:auto;
margin-right:auto;
}
th {
color: green;
border: 1px solid black;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Simple Example Without Word Wrap</h3>
<table width="600">
<tr>
<th>Course Name</th>
<th>Specifications</th>
<th>Duration</th>
</tr>
<tr>
<td>Data Structures and Algorithms</td>
<td>
It includes pre-recorded premium
<span style="color: red;">
Videolectures&programmingquestions
</span> for practice.
</td>
<td>4 months</td>
</tr>
<tr>
<td>GFG Placement Programme</td>
<td>
This course helps students to prepare
for the Recruitment drive.
</td>
<td>3 months</td>
</tr>
</table>
</body>
</html>
Producción:
Nota: En la tabla anterior, definimos un ancho de tabla de 600 px y aplicamos el diseño de la tabla como fijo . Observe que una palabra larga, que está marcada en rojo , se hace eliminando los espacios, por ejemplo, propósito.
Método 1: Uso de la propiedad word-wrap: Word-wrap: break-word; La propiedad se utiliza para dividir la palabra larga en un punto de interrupción apropiado.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to wrap table cell
td content using CSS?
</title>
<style>
h1,
h3 {
text-align: center;
}
table {
border-spacing: 0px;
table-layout: fixed;
margin-left: auto;
margin-right: auto;
}
th {
color: green;
border: 1px solid black;
}
td {
border: 1px solid black;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Wrap Table Cell td Content using word-wrap property</h3>
<table width="600">
<tr>
<th>Course Name</th>
<th>Specifications</th>
<th>Duration</th>
</tr>
<tr>
<td>Data Structures and Algorithms</td>
<td>
It includes pre-recorded premium
<span style="color: red;">
Videolectures&programmingquestions
</span> for practice.
</td>
<td>4 months</td>
</tr>
<tr>
<td>GFG Placement Programme</td>
<td>
This course helps students to prepare
for the Recruitment drive.
</td>
<td>3 months</td>
</tr>
</table>
</body>
</html>
Producción:
Método 2: Uso de la propiedad word-break: The word-break: break-all; La propiedad se utiliza para dividir la palabra en cualquier carácter.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to wrap table cell
td content using CSS?
</title>
<style>
h1,
h3 {
text-align: center;
}
table {
border-spacing: 0px;
table-layout: fixed;
margin-left: auto;
margin-right: auto;
}
th {
color: green;
border: 1px solid black;
}
td {
border: 1px solid black;
word-break: break-all;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Wrap Table Cell td Content using word-break property</h3>
<table width="600">
<tr>
<th>Course Name</th>
<th>Specifications</th>
<th>Duration</th>
</tr>
<tr>
<td>Data Structures and Algorithms</td>
<td>
It includes pre-recorded premium
<span style="color: red;">
Videolectures&programmingquestions
</span> for practice.
</td>
<td>4 months</td>
</tr>
<tr>
<td>GFG Placement Programme</td>
<td>
This course helps students to prepare
for the Recruitment drive.
</td>
<td>3 months</td>
</tr>
</table>
</body>
</html>
Producción:
Nota: tenga en cuenta la diferencia entre el resultado de ambas propiedades. La propiedad word-wrap ajusta la palabra en una nueva línea, mientras que la propiedad word-break continúa siguiendo el flujo y se rompe en cualquier carácter apropiado.
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por chitrankmishra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA