Линейный разрыв, вызванный определенным символом

Question

Я хотел бы иметь разрыв строки, который был принудительно установлен перед символом «+», если это возможно, используя стиль css или иначе по-другому. Это возможно?

#myDiv{ 
 
    width: 80% 
 
    } 
 

 

 
#myP{ 
 
    color: blue; 
 
    font-family: arial; 
 
    font-size: 3em; 
 
    font-weight: 900; 
 
    line-height: 1.5em; 
 
    } 
 

<div id="myDiv"> 
 
    <p id="myP">Potatoes, peas, carrots, corn, beans, butter + meat, gravy, yorkshire pudding and desert.</p> 
 
</div>

Answer 1

CSS не может влиять на содержание элемента в порядке, вам требуется. Однако вы можете достичь его с помощью JS, как это:

$('#myP').html(function(i, h) { 
 
    return h.replace('+', '<br />+'); 
 
});

#myDiv { 
 
    width: 80% 
 
} 
 
#myP { 
 
    color: blue; 
 
    font-family: arial; 
 
    font-size: 3em; 
 
    font-weight: 900; 
 
    line-height: 1.5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myDiv"> 
 
    <p id="myP">Potatoes, peas, carrots, corn, beans, butter + meat, gravy, yorkshire pudding and desert.</p> 
 
</div>

В качестве альтернативы вы можете просто изменить свой HTML, чтобы включить <br /> тег или изменить содержимое так, чтобы текст после + персонаж сидит в своем собственном теге p.