Question

那么，<p id="id1">content 1 content 2 </p>元素有什么方法可以不中断？您可以将它们添加在一起，如下所示：

id

但是如何才能为<p>元素保留一个<p>而又不中断呢？是否有CSS呢？或者<p id="id1">I like to eat </p> <p id="id2">Icecream and pickles </p> <p id="id3">with cucumbers on top </p>元素根本不可能吗？代码：

I like to eat Icecream and pickles with cucumbers on top

所需结果：

I like to eat
Icecream and pickles
with cucumbers on top

实际结果：

{{1}}

Answer 1

client.println("<!DOCTYPE html><html>"); client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"); client.println("<link rel=\"icon\" href=\"data:,\">"); client.println("<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\">"); client.println("<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js\"></script>"); client.println("</head><body>"); client.println("<form>"); client.println("<hr>"); client.println("<section class=intensity>"); client.println("<label for=intensity>Light Brightness"); client.println("<br>"); client.println("<span>Dim</span>"); client.println("<input id=intensity type=range name=Dim min=0 max=255 step=1>"); client.println("<span>Bright</span>"); client.println("</section>"); client.println("</form>"); client.println("<div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1></div>"); client.println("<a class=\"btn btn-primary btn-lg\" href=\"#\" id=\"change_color\" role=\"button\">Change Color</a> "); client.println("<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div>"); client.println("<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' + Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);"); //client.println("<script>function update(intensity)"); client.println("document.getElementById(\"change_color\").href=\"?r\" + Math.round(picker.rgb[0]) + \"g\" + Math.round(picker.rgb[1]) + \"b\" + Math.round(picker.rgb[2]) + intensity + \"&\";}</script></body></html>");默认情况下是一个块元素，这意味着它占据了整个水平行。一种选择是使用默认为内联的p，另一种选择是使用CSS来制作span p。

Answer 2

就是这样。您可以内联使用CSS显示

<p id="id1" style="display: inline">I like to eat</p>
<p id="id2" style="display: inline">Icecream and pickles </p>
<p id="id3" style="display: inline">with cucumbers on top </p>

OR

这也是另一种方式。而且我更喜欢这种方式，因为它更干净。

<style type="text/css">
  #id1,
  #id2,
  #id3 {
    display: inline;
  }
</style>


<p id="id1">I like to eat </p>
<p id="id2">Icecream and pickles </p>
<p id="id3">with cucumbers on top </p>

Css内联-将元素显示为内联元素（如）。任何高度和宽度属性都无效。

Answer 3

#test1 p {
  float: left;
}

#test2 p {
  display: inline-block;
}

#test3 {
  display: table;
}

#test3 p {
  display: table-cell;
}

hr {
  clear: both;
}

<h2> Use float </h2>

<div id="test1">
  <p>I like to eat </p>
  <p>Icecream and pickles </p>
  <p>with cucumbers on top </p>
</div>

<hr/>

<h2> Use display:inline-block </h2>

<div id="test2">
  <p>I like to eat </p>
  <p>Icecream and pickles </p>
  <p>with cucumbers on top </p>
</div>

<hr/>

<h2> Use display:table </h2>

<div id="test3">
  <p>I like to eat </p>
  <p>Icecream and pickles </p>
  <p>with cucumbers on top </p>
</div>

<hr/>

有没有一种方法可以使<p>元素不以HTML中断结尾？

3 个答案: