如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
当前回答
关于css技巧,Chris coyer测试了很多选项,最后一个非常简洁的选项是使用display:table,每个选项都有自己的问题,当你在span上使用background-color时,你会发现!
身体{ 填充:20 px; font-family: 'Open Sans', Sans -serif; } h1 { 粗细:300; 字体大小:24 px; 行高:1.6; 背景:# eee; 填充:20 px; 边框:5px 0 25px 0; text-align:中心; } H1跨度{ 颜色:白色; 粗细:900; } H1跨度{ 背景:黑色; 填充:1px 8px; 显示:表; 保证金:汽车; } < h1类= " 1 " > 稍后休息 < span > 在此之前 < / span > < / h1 >
在这里你可以看到codeen上的所有其他选项:
注入换行符
其他回答
一个现代而简单的解决方案是这样设置宽度:
宽度: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 >
CSS中的“\a”命令生成一个回车。这是CSS,不是HTML,所以它应该更接近你想要的:没有额外的标记。
在一个blockquote中,下面的例子同时显示标题和源链接,并用回车符("\a")分隔两者:
blockquote[title][cite]:after {
content:attr(title)"\a"attr(cite)
}
使用overflow-wrap: break-word;如:
.yourelement{
overflow-wrap: break-word;
}
你可以使用空格:pre;使元素像<pre>一样,保留换行符。例子:
p { 空白:前; } < p >你好 </p>
注意,对于IE,这只适用于IE8+。
使用,而不是空格将防止中断。
<span>I DONT WANT TO BREAK THIS LINE UP, but this text can be on any line.</span>