Разбить длинный текст без пробелов внутри ячейки таблицы - PullRequest
Новая
       50

Разбить длинный текст без пробелов внутри ячейки таблицы

0 голосов
/ 20 апреля 2020

Я хотел бы выровнять этот текст как здесь , но если я запустил этот код, мой более длинный текст будет в одной строке, а текст "Мои данные" в две строки. Как выровнять по большему количеству строк с ограниченным ширина? 

<html>
<head>
<style>

.div_name p{
    position: fixed;
    display:inline;
}

.div_city p{
    display:inline;
}

.div_info p{
    display:inline;
} 

 div.all_info {
  position: absolute;
  right: 30%;
  width: 200px;
  height: 100px;
  //border: 3px solid blue;
} 
</style>

</head>
<body>

<div class="all_info" align = "right"> 
<table>
<tr><td align="right" width150px><div class="div_name:">Your name: </td> <td align="left" width=200px><p id="myname">David</p></td></div></tr>  
<tr><td align="right" width=150px><div class="div_city:">Your city: </td> <td align="left" width=200px><p id="mycity">Prageu</p></td></div></tr>
<tr><td align="right" width=250px><div class="div_info:">Your Informations: </td> <td align="left" width=200px><p id="myinfo">myinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfo</p></td></div></tr>
</table>    
</div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 20 апреля 2020 
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
 </head>

<body>

  <div class="row"> 
  <div class="col-6">
      Space for other element or leave it blank
  </div>
    <div class="col-3 text-right pr-0">
        <p>Your Name:</p>
        <p>Your City:</p>
        <p>Your Informations:</p>
    </div>
      <div class="col-2 text-left pl-2">
        <p>XYZ</p>
        <p>XYZ City</p>
        <p>myinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfo</p>
      </div>
 </div>


p{
  overflow-wrap: break-word;
  margin: 0 !important;
}
0 голосов
/ 20 апреля 2020

Секрет в том, чтобы использовать word-break:break-all в каждой <td> ячейке.

В качестве альтернативы вы можете использовать overflow-wrap, но ведет себя аналогично.

Примечание: В отличие от переноса по словам, перенос через переполнение создает разрыв только в том случае, если целое слово не может быть помещено в собственную строку без переполнения.

Вот полная статья , сравнивающая их обоих 

table{
  width: 400px;
  border: 1px dashed salmon;
}

table td{ 
  vertical-align: top; 
  padding: 5px;
  word-break: break-all;  /* MUST ADD THIS */
}

table td:nth-child(1){
  text-align: right;
  width: 140px;
}
<table>
  <tr>
    <td>Your name: 
    <td>David
  </tr>
  <tr>
    <td>Your city: 
    <td>Prageu
  </tr>
  <tr>
    <td>Your Informations: 
    <td>myinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfo
  </tr>
</table>

Я очистил вашу разметку HTML, нет необходимости в обертывании тегов div и p внутри ячеек таблицы.

...