在特定字符处强制换行

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实现它，如下所示：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

<br />

＆＃13;

＆＃13;

＆＃13;

或者，您可以修改HTML以包含+标记，或更改内容，以便p字符后面的文字位于其自己的web.html标记内。