Брейк-слово оставляет пустую область в DIV - PullRequest
Новая
       10

Брейк-слово оставляет пустую область в DIV

0 голосов
/ 08 ноября 2018

У меня есть следующие html и css 

<html>
<body>
<div class="a" style="
    background-color: black;
    color: #fff;
    max-width: calc(65% - 75px);
    width: 21%;
    display: inline-block;
    float: right;
    position: relative;
    padding: 3px 5px;
">
<span class="message" style="
    width: auto;
    position: relative;
    text-align: right;
    display: inline-block;
    width: auto;
    word-break: break-word;
">let's check this one now for asd4ffdsa sassfhkloitrf.</span>
</div>

</body></html>

, и он выводит следующий макет enter image description here

Но проблема в том, что я не могу избавитьсяпустого пространства, как показано здесь enter image description here

Я перепробовал все возможные исправления с позициями, шириной автоматически, свойствами отображения, но я не могу избавиться от лишнего пространства здесь.

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Я проверил ваш код, и чтобы удалить пустое пространство, вы должны удалить свойство width или установить его в автоматический режим, так как он заставляет 21% страницы в качестве ширины. Так и должно быть: 

<html><body>
    <div class="a" style="
      background-color: black;
      color: #fff;
      max-width: calc(65% - 75px);
      display: inline-block;
      float: right;
      position: relative;
      padding: 3px 5px; ">
    <span class="message" style="
      width: auto;
      position: relative;
      text-align: right;
      display: inline-block;
      width: auto;
      word-break: break-word; ">let's check this one now for asd4ffdsa sassfhkloitrf.</span> </div>

</body></html>

Надеюсь, это поможет.

0 голосов
/ 08 ноября 2018

Используйте это: 

word-break: break-all;

вместо ключевого слова

...