Как заставить разрывать неразрывные строки?

Question

У меня есть HTML-страница, которую я генерирую из данных, содержащихся в базе данных. База данных иногда содержит длинные строки, которые браузер не может разбить, потому что строки не содержат ломаемых символов (пробел, точка, запятая и т. Д.).

Есть ли способ исправить это с помощью html, css или даже javascript?

См. ссылку для примера проблемы.

Answer 1

Да, вы можете, просто установите для свойства css:

.some_selector {
    word-wrap: break-word;
}

Редактировать: Некоторое тестирование показывает, что оно работает с div или ap - элементом уровня блока - но не работает с ячейкой таблицы, а также когда div помещается внутри ячейки таблицы.

Протестировано и работает в IE6 , IE7 , IE8 , Firefox 3.5.3 и Chrome .

Работает:

<div style="word-wrap: break-word">aaaaaaaaaaaaaaaaaaaaaaddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>

Answer 2

На основе этой статьи и этой статьи : "Застенчивый дефис" или "Мягкий дефис" можно записать в HTML как: ­ / ­ /&#xAD (173 декабря = AD шестнадцатеричный).Все они преобразуются в символ U + 00AD.

JavaScript textContent и nodeValue текстовых узлов DOM не являются «закодированными сущностями» - они просто содержат действительные сущности.Для того чтобы написать эти символы, вы должны сами их кодировать: \xAD - это простой способ написать тот же символ в строке JavaScript.String.fromCharCode(173) также будет работать.

Исходя из вашего ОЧЕНЬ хорошего ответа - версия плагина jQuery:

$.fn.replaceInText = function(oldText, newText) {
  // contents() gets all child dom nodes -- each lets us operate on them
  this.contents().each(function() {
    if (this.nodeType == 3) { // text node found, do the replacement
        if (this.textContent) {
            this.textContent = this.textContent.replace(oldText, newText);
        } else { // support to IE
            this.nodeValue = this.nodeValue.replace(oldText, newText);
        }
    } else {
      // other types of nodes - scan them for same replace
      $(this).replaceInText(oldText, newText);
    }
  });
  return this;
};

$(function() {
    $('div').replaceInText(/\w{10}/g, "$&\xAD");
});

Примечание:

Я думаю, что место, где это должно происходить, НЕ в JavaScript - это должно быть в коде на стороне сервера.Если это только страница, используемая для отображения данных, вы можете легко сделать аналогичное регулярное выражение для замены текста перед его отправкой в ​​браузер.Однако решение JavaScript предлагает одно преимущество (или недостаток в зависимости от того, как вы хотите на него смотреть) - оно не добавляет никаких посторонних символов к данным до тех пор, пока не выполнится скрипт, что означает, что любые роботы, сканирующие ваш HTML-вывод для данных, не увидятстеснительные дефисы.Хотя спецификация HTML интерпретирует его как «подсказку переноса» и невидимый символ, это не гарантируется в остальной части мира Unicode: (цитата из стандарта Unicode через вторую статью, которую я связал)

U + 00AD мягкий дефис указывает точку переноса, где разрыв строки предпочтительнее, когда слово должно переноситься.В зависимости от сценария видимая визуализация этого символа при разрыве строки может отличаться (например, в некоторых сценариях он отображается как дефис -, а в других он может быть невидимым).

Другое примечание: Нашел в этот другой SO Вопрос - похоже, что символ " Zero Width Space " ​ / ​ / U+200bэто еще один вариант, который вы могли бы изучить.Это будет \x20\x0b в виде строки JavaScript.

Answer 3

Также можно использовать свойство word-break css для вырезания каждого слова на краю элемента.

.selector_name {
  word-break: break-all;
}

<p class="selector_name">some words some words some words some words</p>

you can obtain:
some word|
s some wo|<-edge of the element
rds some |
words som|
e words  |

Answer 4

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

Я знаю, что есть стратегия со вставкой символа мягкого дефиса (­), где это необходимо, но это не похоже на популярный вариант.

Проверьте этот вопрос: Мягкий дефис в HTML (против)

Answer 5

Я отвечаю на свой вопрос здесь ...

На основании ваших ответов я придумал это решение (спасибо @CMS в этот вопрос за помощь).

Этот скрипт разбивает любое слово длиной более 30 символов, вставляя пробел в 31-ю позицию.

Вот исправленная версия: ссылка

У меня осталась одна проблема, я бы лучше вставил ­, а затем пробел. Но присвоение node.nodeValue или node.textContent вызывает вставку текста ­, а не тега.

<script type="text/javascript">

    $(function() {
        replaceText(/\w{30}/g, "$& ", document.body);
    });

    function replaceText(oldText, newText, node) {
        node = node || document.body; // base node 

        var childs = node.childNodes, i = 0;

        while (node = childs[i]) {
            if (node.nodeType == 3) { // text node found, do the replacement
                if (node.textContent) {
                    node.textContent = node.textContent.replace(oldText, newText);
                } else { // support to IE
                    node.nodeValue = node.nodeValue.replace(oldText, newText);
                }
            } else { // not a text mode, look forward
                replaceText(oldText, newText, node);
            }
            i++;
        }
    }

</script>

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

Спасибо

Answer 6

Существует специальный символ ­ или ­, который может это сделать. Например:

Dzie­le­nie wy­ra­zów

может отображаться как:

 1. dzie
 2. le
 3. nie wy
 5. ra
 6. zow

Answer 7

Проблема с использованием ­ и решениями, приведенными выше, заключается в том, что дополнительный символ все еще присутствует, а с действием копирования / вставки (даже в виде простого текста) он появляется.

Я бы использовал вместо этого тег <wbr>, который не отображается и не учитывается при копировании.

Например, чтобы адреса электронной почты разбивались на две строки (только когда недостаточно места), я использую это:

echo str_replace( "@","<wbr>@", $email );

В результате получается что-то вроде этого:

name.surname
@website.com

Answer 8

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

Также было бы неплохо избегать сирот, где у вас есть только один или два символа в последней строке.

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

function breakwords(text, n, min){
 var L= text.length;
 n= n || 20;
 min= min || 2;
 while(L%n && L%n<min)--n;
 var Rx= RegExp('(\\w{'+n+',}?)','g');
 text= text.replace(Rx,'$1 ');
 return text;
}

// тест

var n = 30, min = 5;

var txt = 'abcdefghijklmnopqrstuvwxyz0123456789 abcdefghijklmnopqrstuvwxyz012345678 abcdefghijklmnopqrstuvwxyz01234567 abcdefghijklmnopqrstuvwxyz01238 *;

txt = txt.replace (/ (\ w {30,}) / g, function (w) {вернуть ключевые слова (w, n, min)});

alert (txt.replace (/ + / g, '\ n'))

/*  returned value: (String)
abcdefghijklmnopqrstuvwxyz0123
456789
abcdefghijklmnopqrstuvwxyz0123
45678
abcdefghijklmnopqrstuvwxyz012
34567
abcdefghijklmnopqrstuvwxyz01
23456
*/

Answer 9

Вы можете использовать jQuery для достижения этой цели, но как: Позвольте мне объяснить немного. Сначала вам нужно добавить ссылку, и есть плагин, который может вам помочь: Подробнее плагин - JQuery Но вам нужно проникнуть в ваш код на этапе выборки. На данный момент вы можете решить эту проблему на этапе HttpHandler или Page_PreInit, но без кода на стороне сервера это должно быть сложно, или, возможно, нет никакого способа. Я не знаю, но вы должны быть в состоянии добавить что-то на html-странице, полученной из базы данных.