Html 如何使用 CSS 在跨度中插入换行符？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31128961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to insert a line break in span using CSS?
提问by Suhas Deshpande
Now I want to break the line on Q1 and move this Q1 next to Summary. Is there a way to do it? Following is the CSS for the button.
现在我想打破 Q1 的界限并将这个 Q1 移到摘要旁边。有没有办法做到这一点？以下是按钮的 CSS。
span {
display: inline-block;
font-size: 80%;
line-height: normal;
width: 100%;
line-height: 2rem;
border: 1px solid #019ed5;
border-radius: 25px;
cursor: pointer;
}
回答by Philll_t
Try adding:
尝试添加：
display: inline-block;
Note: it may change the behavior a bit.
注意：它可能会稍微改变行为。
in the html:
在html中：
<span>JAN-MAR <br /> Q1 Summary</span>
You may also use js, for a more dynamic approach:
您也可以使用 js，以获得更动态的方法：
<span class="q-span">JAN-MAR Q1 Summary</span>
and you can use jQuery to do it:
你可以使用jQuery来做到这一点：
$(document).ready(function(){
$(".q_header").each(function(){
// Get content
var
content = $(this).text(),
// get first word
first_w = content.match(/([\w\-]+)/);
// replace the first word with first word and break
var new_cnt = content.replace(first_w[0], first_w[0] + "</br>");
// add the css to make it inline-block
$(this).css("display", "inline-block").html(new_cnt);
});
});
回答by Jaffer Wilson
Use
用
display:block;
ORspanis an inline element, as such styling attributes such as widthor margindon't work. You can fix that by either changing the spanto a block element (such as div), or by using padding instead.
ORspan是一个内联元素，因为诸如widthor 之类的样式属性margin不起作用。您可以通过将 更改span为块元素（例如div）或使用填充来解决此问题。
