Разбить слово на определенный символ - PullRequest
Новая
       8

Разбить слово на определенный символ

0 голосов
/ 20 сентября 2018

Я понимаю, что аналогичные вопросы задавались, но ни один из них совсем не такой.

У меня есть ситуация, когда я использую БЭМ для отображения некоторых классов в тегах code.Ниже приведен пример:

enter image description here

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

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

У меня есть другое решение, использующее jquery, 

$('.mypara').each(function () {
     var str = $(this).html();  
      var htmlfoo = str.split('.').join('</br>');
     $(this).html(htmlfoo);
 });
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<code class="mypara">
This is-the HTML if its - characters exceed 50. characters it should go-to next line
</code>

<code class="mypara">
This is the HTM-if its. characters exceed 50 - characters it should. go-to next-line
</code>
0 голосов
/ 20 сентября 2018

К сожалению, я не думаю, что есть способ сделать все, что вы хотите, с чистым CSS.

ОБНОВЛЕНИЕ: удалены пробелы перед точками в решении JS.

Если вы можете использоватьJavaScript вы можете обработать содержимое тега code, чтобы отключить перенос слов с дефисами, и вы можете обернуть каждый блок, начиная с точки в inline-block.

Следующий код разбивает содержимое каждого code тег в список блоков, которые начинаются с пробела или точки.Каждый блок переносится с интервалом, который предотвращает перенос, а блоки, начинающиеся с точки, дополнительно помечаются как display: inline-block;.Это должно обеспечить поведение, которое вы ищете, и дополнительно сохранить весь контент при копировании текста.

CSS: 

.no-wrap-hyphen {
    white-space: nowrap;
}
.wrap-period {
    display: inline-block;
}

JavaScript (запустите эту функцию при загрузке окна и изменении размера):

function wrapPeriodsNotHyphens() { // run on window load or resize
    var codes = document.getElementsByTagName( "code" );

    for ( var i = 0; i < codes.length; i++ ) {

        currentCode = codes[ i ].innerHTML.split(/(?=[ .])/); // split by spaces and periods

        for ( var c = 0; c < currentCode.length; c++ ) {
            // surround each item with nowrap span
            currentCode[ c ] = '<span class="no-wrap-hyphen">' + currentCode[ c ] + '</span>';
            if ( currentCode[ c ].indexOf( '.' ) > -1 ) {
                // add a zero size space at the start for periods
                currentCode[ c ] = '<span class="wrap-period">' + currentCode[ c ] + '</span>';
            }
        }

        codes[ i ].innerHTML = currentCode.join('');
    }
}
...