如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
当前回答
例如,您可以添加大量的填充和强制文本拆分到新行
p {
padding-right: 50%;
}
对我来说,在响应式设计的情况下工作得很好,只有在一定的宽度范围内,文本才需要被分割。
其他回答
我猜您不希望使用断点,因为它总是会断行。对吗?如果是这样,如何在你的文本中添加一个断点<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/
也许有人会有和我一样的问题:
我在一个带有display: flex的元素中,所以我必须使用flex-direction: column。
一个现代而简单的解决方案是这样设置宽度:
宽度:min-content;
这个CSS规则主要适用于文本内容,但不仅限于: https://developer.mozilla.org/en-US/docs/Web/CSS/min-content
p { 保证金:20 px; 颜色:# 222; font-family:'世纪哥特式',sans-serif; 边框:2px虚线灰色; 填充:3 px; } .max { 宽度:max-content; } .min { 宽度:min-content; } <!DOCTYPE html > < html lang =“en”> <头/ > <身体> <p class="max">最大宽度</p> <p class="min">最小可用宽度</p> < /身体> < / html >
例如,您可以添加大量的填充和强制文本拆分到新行
p {
padding-right: 50%;
}
对我来说,在响应式设计的情况下工作得很好,只有在一定的宽度范围内,文本才需要被分割。
这适用于Chrome浏览器:
p::after {
content: "-";
color: transparent;
display: block;
}