Есть ли в CSS или JS опция для принудительного перехода односимвольных слов в конце строки к следующему? - PullRequest
0 голосов
/ 07 мая 2020

При создании адаптивного веб-дизайна часто бывает, что слово из одной буквы остается последним словом в строке абзаца:

This is a
paragraph

Я бы хотел переместить такое однобуквенное слово следующим образом :

This is
a paragraph

Есть ли в CSS встроенное свойство, позволяющее добиться такого эффекта? Если его нет, как это можно сделать в JavaScript?

Ответы [ 2 ]

1 голос
/ 07 мая 2020

Чтобы сохранить однобуквенные слова (например, 'a' или 'I') в той же строке, что и следующее слово, вы можете заменить символ пробела между ними неразрывным символом пробела Unicode \u00A0.

Это можно автоматизировать с помощью небольшой команды JavaScript. Например, этот код заменяет [space][letter][space] на [space][letter][non-breaking space]:

const modifySingleChars = str => str.replace(/ ([a-zA-Z]) /g,
    ' $1' + '\u00A0');

Чтобы изменить все экземпляры на странице, сначала соберите все текстовые узлы в теле (пропуская все внутри тега <script>.

Затем просто перебирайте текстовые узлы, делая соответствующие замены.

Рабочий пример:

// form array of all text nodes in parentNode
function allTextNodes(parentNode) {
  let arr = [];
  if (!parentNode) {
    return arr;
  }

  let nodes = parentNode.childNodes;
  nodes.forEach(node => {
    if (node.nodeName === 'SCRIPT') {
      return;
    }
    if (node.nodeType === Node.TEXT_NODE) {
      arr.push(node);
    } else {
      arr = arr.concat(allTextNodes(node));
    }
  });
  return arr;
}

// convert [space][letter][space] to [space][letter][non-breaking space];
const modifySingleCharWords = str => str.replace(/ ([a-zA-Z]) /g,
  ' $1' + '\u00A0');

function fixAllSingleCharWordsInBody() {
  let tNodes = allTextNodes(document.body);
  tNodes.forEach(tNode => {
    tNode.nodeValue = modifySingleCharWords(tNode.nodeValue);
  });
}
<body>
  <div id="wrapper" style="width:20rem">
    <h4>Prevent single character words at end of line</h4>
    <button type="button" onclick="fixAllSingleCharWordsInBody();">Fix All Words
  </button>
    <p>Lorem &nbsp;ipsum dolor i amet, consectetur a dipiscing elit, sed o eiusmod tempor incididunt u labore et dolore magna aliqua. <span>Nisl purus i mollis</span> nunc.
    </p>
    <p>In vitae turpis massa e elementum tempusus a sed. Eget mi proin e libero enim i faucibus. Quis lectus nulla a volutpat diam ut.
    </p>
    <p>Pharetra e ultrices neque ornare. Donec a tristique risus e feugiat in fermentum. Consectetur adipiscing e u aliquam purus sit amet.
    </p>
    <p>Vitae congue mauris rhoncus aenean e elit scelerisque mauris pellentesque. Mauris u eros i cursus turpis a tincidunt dui.
    </p>
    <p>At volutpat diam u venenatis tellus. Tellus integer feugiat scelerisque varius morbi i nunc faucibus at.</p>
    <script>
      const b = 'Do not modify anything inside a script tag';
    </script>
  </div>
</body>
1 голос
/ 07 мая 2020

Если вы хотите ВСЕГДА держать «а» и «абзац» вместе, добавьте между ними «неразрывный пробел»:

<div style="width:100px;border:1px solid #333;padding:5px">
<p>
This is a&nbsp;paragraph
</p>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...