Force text in 2 lines in a row of a table

Question

Force text in 2 lines in a row of a table

Navigation

#1 by (0 votes)

0

I have a table that when loading too long text stretches the row too long and leaves the container of the div of the table, that is only in the case that the text is a single word without spaces, because with spaces if it leaves in several rows. The issue is that I have to upload the names of photos and videos in a row, and these are sometimes composed of a single string of characters without space and are very long, what can I do to force them to come out in more than one row? / p>

html5 css3

asked by Leandro Ricardo 24.09.2018 в 22:36

source

1 answer

Sequelize does not validate my model Put table name in SQL query result

score 0 · Accepted Answer

You have two options, one to place the div with the attribute white-space: pre-wrap which forces you to make a line break or place the separate div also with the overflow:auto for you to create a scroll in case you need to place a maximum height to your div, I hope it serves you.

.wrap,
.wrap2{ 
  width:100px;
  white-space: pre-wrap;      /* CSS3 */   
  white-space: -moz-pre-wrap; /* Firefox */    
  white-space: -pre-wrap;     /* Opera <7 */   
  white-space: -o-pre-wrap;   /* Opera 7 */    
  word-wrap: break-word;      /* IE */
}

.wrap{
  border:1px solid red;
  height:auto;
}

.wrap2 { 
  border:1px solid blue;
  height:100px;
  overflow: auto;
  width:100px;
}

.tabla2{
  margin-top:50px;
}

<table border="1" class="tabla">
  <tr>
    <td>
      <div class="wrap">Esta-es-una-línea-larga-de-texto-sin espacios.Esta-es-una-línea-larga-de-texto-sin espacios.-Esta-es una-línea-larga.-de-texto-sin-cualquier-espacios-Esta-es-una-línea-larga-de-texto-sin-cualquier-espacio</div>
    </td>
  </tr>
</table>

<table border="1" class="tabla2">
  <tr>
    <td>
      <div class="wrap2">Esta-es-una-línea-larga-de-texto-sin espacios.Esta-es-una-línea-larga-de-texto-sin espacios.-Esta-es una-línea-larga.-de-texto-sin-cualquier-espacios-Esta-es-una-línea-larga-de-texto-sin-cualquier-espacio</div>
    </td>
  </tr>
</table>