如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
当前回答
Vincent Robert和Joey Adams的答案都是正确的。但是,如果您不想更改标记,可以使用javascript插入一个<br />。
在CSS中,不改变标记是无法做到这一点的。
其他回答
不可能使用相同的HTML结构,你必须有一些东西来区分Hello和How are you。
我建议使用span,然后显示为块(实际上就像<div>)。
P跨度{ 显示:块; } <p><span>hello</span><span>How are you</span></p>
Vincent Robert和Joey Adams的答案都是正确的。但是,如果您不想更改标记,可以使用javascript插入一个<br />。
在CSS中,不改变标记是无法做到这一点的。
正常使用<br/>,但是当你不需要它时用display: none隐藏它。
我希望大多数发现这个问题的人都想使用css /响应式设计来决定是否在特定的位置出现换行符。(不要对<br/>有任何个人不满)
虽然不是很明显,但实际上可以对<br/>标记应用display:none来隐藏它,这样就可以与语义br标记一起使用媒体查询。
<div>
The quick brown fox<br />
jumps over the lazy dog
</div>
@media screen and (min-width: 20em) {
br {
display: none; /* hide the BR tag for wider screens (i.e. disable the line break) */
}
}
这在响应式设计中非常有用,在这种设计中,您需要在精确的换行处强制将文本分成两行。
jsfiddle例子
我猜您不希望使用断点,因为它总是会断行。对吗?如果是这样,如何在你的文本中添加一个断点<br />,然后给它一个类,如<br class="hidebreak"/>,然后使用媒体查询右上方的大小,你想要它打破隐藏<br />,所以它打破在一个特定的宽度,但保持内联以上的宽度。
HTML:
<p>
The below line breaks at 766px.
</p>
<p>
This is the line of text<br class="hidebreak"> I want to break.
</p>
CSS:
@media (min-width: 767px) {
br.hidebreak {display:none;}
}
https://jsfiddle.net/517Design/o71yw5vd/
代码可以是:
<div class="text-class"><span>hello</span><span>How are you</span></div>
CSS将是:
.text-class {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}