Как исправить, когда слова обрезаются с помощью переноса слов? CSS

avatar
Johnny
9 августа 2021 в 03:38
495
4
1

У меня есть приведенный ниже код, который выполняет перенос слов, но проблема в том, что он обрезает слово так же, как вывод примера. Ожидаемый результат: вторая "голова" должна быть на следующей строке и не вырезаться.

enter image description here

Вот код.

<div className="relative mt-px-14 mx-px-8 p-px-25">
  <div className="relative">
        <div className="absolute w-full text-20 whitespace-pre-line break-words">
          Head shoulder knees and toes head
        </div>
        .... more codes here
  </div>
</div>

Tailwind css документация

> break-all ==> word-break: break-all;
> whitespace-pre-line   ===>  white-space: pre-line;
Источник
Ambrish Pathak
9 августа 2021 в 03:44
0

Попробуйте использовать white-space: nowrap;

PHP Geek
9 августа 2021 в 03:48
0

Попробуйте использовать класс "break-words"

Johnny
9 августа 2021 в 03:51
0

я попробовал все ваши предложения, но не работает.

Ambrish Pathak
9 августа 2021 в 04:02
0

Можете ли вы создать минимальный воспроизводимый пример? coderhelper.com/help/минимально-воспроизводимый-пример

Mohit Kushwaha
9 августа 2021 в 04:06
0

вы можете поделиться кодом, используя play.tailwindcss.com, чтобы мы лучше понимали, что происходит.

Ответы (4)

avatar
Johnny
9 августа 2021 в 04:59
0

На самом деле стили работают нормально.

Я обнаружил, что моя пользовательская клавиатура не возвращает " " пробел, если я нажимаю пробел. Вместо этого возвращается &nbsp;, что вызывает проблему.

Что я сделал, так это заменил &nbsp; на пробел(" "), и это решило проблему. Замена   из текстового узла javascript dom

avatar
Tony Tin Nguyen
9 августа 2021 в 05:51
0

Используйте overflow-wrap: break-word; для

.

article {
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
  text-align: justify;
}

article p {
  overflow-wrap: break-word;
}
<article lang="en">
  <p>As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
  <p>For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</p>
</article>
avatar
user3733831
9 августа 2021 в 05:26
0

Также можно использовать свойство CSS дефисы.

Это краткая демонстрация:

article {
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
  text-align: justify;
}

article p {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
<article lang="en">
  <p>As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
  <p>For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</p>
</article>
avatar
Abin Thaha
9 августа 2021 в 04:16
0

Как видно из приведенного ниже фрагмента кода, значение для word-break, которое вы искали, равно break-word, а не break-all.

.

Согласно ссылке,

break-all   To prevent overflow, word may be broken at any character
break-word  To prevent overflow, word may be broken at arbitrary points


.one {
  word-break: break-all;
  white-space: pre-line;
}

.two {
  margin-top: 20px;
  white-space: pre-line;
  word-break: break-word;
}
<div class="one">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus deserunt consectetur iste obcaecati nam placeat adipisci beatae explicabo dolorem cum magnam a officiis nihil repudiandae eligendi, tempore ducimus maxime veniam.
</div>

<div class='two'>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus deserunt consectetur iste obcaecati nam placeat adipisci beatae explicabo dolorem cum magnam a officiis nihil repudiandae eligendi, tempore ducimus maxime veniam.
</div>