I have a table in html
which it has a column called nota
in this a linear text arrives, but the column is responsible for accommodating it downwards by making line breaks, the issue is that the word is cut and it can make it difficult for the user to read it, therefore I would like to know if there is a way not to cut it or that when the cut is placed a "-" to make it easier to understand, but I can't find a way, if you help me I appreciate it, I leave the code the table and a picture.
HTML
<table class='table table-stripped' border=1 id="table">
<thead class= 'thead-dark'>
<tr>
<th>#</th>
<th style='width: 110px'>Fecha</th>
<th>Documento</th>
<th>Nombre completo</th>
<th>Sede</th>
<th>Siglas</th>
<th style='width: 200px'>Nota</th>
<th style='width: 40px'>Acciones</th>
</tr>
</thead>
<tbody>
<a href="/Jomar/users_control/controller/ControlAsisController.php?action=todos"></a>
<?php
for($i = 0; $i < count($datos); $i++){
$id = $datos[$i]['id_controlAsis'];
$rutaEd = "/Jomar/users_control/controller/ControlAsisController.php?action=editar&id_controlAsis=$id";
$rutaEl = "/Jomar/users_control/controller/ControlAsisController.php?action=eliminar&id_controlAsis=$id";
echo "<tr>";
echo "<td>". ($i+1) ."</td>";
echo "<td> {$datos[$i]['fecha']} </td>";
echo "<td> {$datos[$i]['documento']} </td>";
echo "<td> {$datos[$i]['nombres']} {$datos[$i]['apellidos']} </td>";
echo "<td> {$datos[$i]['sede']} </td>";
echo "<td> {$datos[$i]['siglas']} </td>";
echo "<td style='word-break: break-all; width: 200px; white-space: initial'> {$datos[$i]['nota']} </td>";
echo "<td>
<a href='$rutaEd' class='badge badge-primary'>Editar </a>
<a href='$rutaEl' class='badge badge-warning'>Eliminar </a>
</td>";
echo "</tr>";
}
?>
</tbody>
</table>
Imagen
I think the problem you have is because the td where you have the text has a style, I mean this
This property is what makes you break your words and throw them down.
Could you try putting
What this does is justify the text using all the with that the box has, which will make the words that do not fit by its length go down.
Cheers
You have to do two things:
The first one, remove the style
word-break: break-all
, this css style will cut off the word when it reaches the margin.p
Second, the text you want to display is recommended to be placed inside an or tagspan
.