在特定字符处断词

Question

我意识到有人问过类似的问题，但是没有一个人像这样。

我遇到一种情况，我正在使用BEM在code标记中显示某些类。下面是一个示例：

很明显，默认行为是在连字符处打断单词，正如我们在示例中看到的那样。有什么方法可以控制换行发生在什么字符上？我希望能够保持类名的完整性，以便在必要时在每个句点.之前进行换行。

Answer 1

不幸的是，我认为没有一种方法可以使用纯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('');
    }
}

Answer 2

我还有另一个使用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>