Не разделяйте дефисные слова

Я занимаюсь разработкой веб-сайта (Wordpress, HTML, CSS, jQuery) с контентом, написанным на португальском языке. Есть много слов с дефисом, которые разбиваются пополам, если они появляются в конце строки. Вот пример:

Batata frita pála-
pála, é uma tara de
sabor.

Есть ли способ, которым я могу определить, если слово переносится через дефис, и не разбить его пополам, если оно находится в конце строки? В идеале было бы просто перейти к следующей строке, но если это невозможно, я открыт для предложений. Что-то вроде этого:

Batata frita
pála-pála, é uma
uma tara de sabor.

Для меня важнее, чем знать решение, это понять его. Заранее спасибо.

РЕДАКТИРОВАТЬ

Сайт разработан на платформе CMS, содержимое вставляется клиентом и является динамичным. Я не могу ожидать, что клиент будет использовать неразрывные дефисы (HTML ‑) сам.

Источник

6 ответов

Решение

Замените все свои дефисы неразрывными дефисами. Это так же, как неразрывный пробел ( ) только дефис.

Источник

Если вы говорите о собственном переносе браузером текстового /HTML-содержимого (в отличие от разбиения регулярных выражений), я могу подумать о двух способах сделать это:

  • использовать неразрывный дефис (HTML ‑) вместо обычного
  • добавлять <span style="white-space: nowrap"> вокруг разделов, которые вы не хотите оборачивать
Источник

Есть несколько возможностей:

<nobr>pála-pála</nobr>
<span class=nobr>pála-pála</span>
pála&#8209;pála

все с плюсами и минусами (см. http://www.cs.tut.fi/~jkorpela/html/nobr.html).

Какой бы подход вы ни выбрали, вы можете попытаться автоматизировать процесс на стороне сервера или на стороне клиента. Поскольку это более или менее наглядно, я думаю, что это вполне можно сделать с помощью клиентского JavaScript. Я бы предложил принять стратегию, аналогичную Firefox: длинные дефисные соединения можно разделить (это обычно улучшает форматирование), но если, скажем, по обе стороны от дефиса есть менее 4 символов, предотвратите разделение.

Источник

Как и предполагали другие, вам нужно заменить обычные дефисы неразрывными.

Это может быть автоматизировано с помощью CMS.

Для Wordpress вы можете добавить фильтр содержимого в functions.php вашей темы:

function non_breaking_hyphens($content){
    return str_replace('-', '&#8209;', $content);
}

add_filter('the_content', 'non_breaking_hyphens');

Это применимо к поиску и замене тела сообщения до его отправки в браузер.

Источник

Если вы столкнулись с этой проблемой, потому что проверяете свой веб-сайт в мобильном браузере iOS, вы должны добавить гораздо более мощный код. Apple iPhone, например, будет переформатировать текст, а также переносить по своему усмотрению. Итак, сделайте это, чтобы полностью устранить проблему:

.yourclass{
    -moz-hyphens: none;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}
Источник

По поводу обновления в вопросе:

Я вижу три возможных решения, но не одно легкое:)

  1. анализировать содержимое с помощью регулярного выражения, если подстрока находится внутри >....<использовать str_replace или завернуть в <nobr> => подвержен ошибкам и сложен
  2. Создайте DOMDocument с содержимым, пройдитесь по DOM и обработайте каждый текстовый узел с помощью вашего непревзойденного решения. => может быть дорогостоящим в ресурсах сервера
  3. Клиентская сторона: большинство WYSIWYG, которые я видел, имеют API для расширений. Либо добавьте кнопку, которая вставляет неразрывный дефис, либо добавьте прослушиватель onKeyUp, который заменяет - с &#8209;
Источник
Другие вопросы по тегам