0

Al romper la palabra con word-wrap: break-word; me gustaría que el border top se mantuviera, hay alguna manera de hacerlo?

Muchas gracias.

td{
border-top: 1px solid black;
}
.width1{
width:60%;
display:inline-block;
word-wrap:break-word;
}
.width2{
width:30%;
}
.width3{
width:10%;
}
@media (max-width: 700px){
.width1{
width:20%;

word-wrap:break-word;
}
.width2{
width:60%;
}
.width3{
width:20%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<table>
  <tr class="fila1">
  <td class="width1">holaaaaaaaaaaaaaaaaaaaaa</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
  <tr class="fila2">
  <td class="width1">1</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
  <tr class="fila3">
  <td class="width1">1</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
 </table>

4
  • No hay ningún margin-top ni overflow-wrap: break-word; en el código que has facilitado.
    – Flowen
    Commented el 20 sept. 2017 a las 9:31
  • @Flowen ya esta la pregunta actualizada Commented el 20 sept. 2017 a las 9:38
  • El word-wrap no está causando el fallo, sino el display:inline-block;. Pruéba a quitarlo y mira como el borde es continuo.
    – Flowen
    Commented el 20 sept. 2017 a las 9:45
  • Lo se, pero si no pongo el display:inline-block, depende de en que navegadores la palabra no se rompe. Commented el 20 sept. 2017 a las 9:46

1 respuesta 1

2

Para mantener el borde lo más sencillo es aplicárselo a la fila en lugar de a las celdas:

tr{
  border-top: 1px solid black;
}
.width1{
  width:60%;
  display:inline-block;
  word-wrap:break-word;
}
.width2{
  width:30%;
}
.width3{
  width:10%;
}
@media (max-width: 700px){
  .width1{
    width:20%;

    word-wrap:break-word;
  }
  .width2{
    width:60%;
  }
  .width3{
    width:20%;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<table>
  <tr class="fila1">
  <td class="width1">holaaaaaaaaaaaaaaaaaaaaa</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
  <tr class="fila2">
  <td class="width1">1</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
  <tr class="fila3">
  <td class="width1">1</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
 </table>

7
  • Buenas @AsierVillanueva me refiero a mantener el border-top pese a tener el break-word. Commented el 20 sept. 2017 a las 9:39
  • Entonces lo más sencillo es aplicárselo a la fila. He modificado la respuesta para mostrarlo Commented el 20 sept. 2017 a las 9:49
  • Mucho más sencillo así! Gracias! Commented el 20 sept. 2017 a las 10:00
  • Asier a ver si puedes darle un vistazo a este jsfiddle jsfiddle.net/w52m5ggb/2 en la tabla hago drag and drop, y al tener el display:inline-block, al hacer drag and drop se pone un estilo incorrecto. Commented el 20 sept. 2017 a las 10:43
  • Perdona, ahora si, mira este jsfiddle jsfiddle.net/w52m5ggb/4 Commented el 20 sept. 2017 a las 10:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.