Избегайте разрывов строк в динамическом тексте, за исключением определенного символа. ⇐ CSS

[Anonymous]

Я предоставил текстовые строки, которые отображаются в контейнерах различной ширины. Я хочу разрешить разрывы строк только после символа «·», который встречается два или три раза в каждой из этих текстовых строк.Что я придумал (см. ниже): С помощью jQuery, Я обернул всю строку диапазоном с помощью CSS-класса, который применяет к строке пробелы: nowrap;, а также добавил тег
после каждого "·", оба с помощью Функция replaceAll: теперь разрывы строк могут происходить только в позиции вставленных тегов
.
Моя проблема: эта строка принудительно разрывается на все
< /код> теги. Но если первая и вторая части текстовой строки (т. е. текст до второго "·" символа) поместятся в родительский контейнер рядом друг с другом, я бы хотел, чтобы произошел только разрыв строки. после второго "·"!

Код: Выделить всё

var mytext = $('#wrapper2 .string1').text();
var search = " ·";

$('#wrapper2 .string1').each( function(index, element) {
$(element).html( $(element).html().replaceAll(mytext, '' + mytext + '') );
$(element).html( $(element).html().replaceAll(search, search + '
') );
})

Код: Выделить всё

.wrapper1 {
width: 400px;
border: 1px solid #aaa;
padding: 0.5em;
font-size: 18px;
text-align: center;
}

#wrapper2 .inner_wrapper {
white-space: nowrap;
}

Код: Выделить всё

The original text

The title of the event · day, month and year · at the end the location

The width of the above box can change. What I want: Linebreaks should only occur after the "·" characters[/b].
[b]The text processed by jQuery

The title of the event · day, month and year · at the end the location

This comes close, but if there is enough space (as in the boxes above), the first linebreak should occur after the second[/b] "·" character, not after each one of them.

Подробнее здесь: https://stackoverflow.com/questions/747 ... -character