¿Cómo hacer que cuando un div haga salto de linea a un texto dentro de él no corte la palabra?

publicado por: Anonymous

Tengo una tabla en html la cual tiene una columna llamada nota en esta llega un texto lineal, pero la columna se encarga de acomodarlo hacía abajo haciendo saltos de linea, la cuestión es que se corta la palabra y puede dificultar el entendimiento al usuario que lo lea, por lo tanto quisiera saber sí hay una manera de que no la corte o que cuando la corte se coloque un “-“ para que sea más fácil de entender, pero no encuentro la manera, sí me ayudaran se los agradezco, dejo el código de la tabla y una imagen.

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

Tabla HTML

solución

creo que el problema que tienes es por que el td en donde tienes el texto tiene un style, me refiero a este

style='word-break: break-all;

Esta propiedad es la que hace que te rompa las palabras y las vaya tirando hacia abajo.

Podrías probar poniendo

style='text-align: justify;'

Esto lo que hace es justificar el texto usando todo el with que tenga la caja, lo que va a hacer que las palabras que no quepan por su largo pasen para abajo.

Saludos

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *