在特定字符處強制換行

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是不能影響您需要的方式元素的含量。

$('#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 />標籤或更改內容，以便文本+角色就坐後：但是，您可以在使用JS，這樣的實現在其自己的p標籤內。