html – 如何在span中插入换行符?

html – 如何在span中插入换行符?,第1张

概述现在我想在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: poin 现在我想在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;}
解决方法 尝试添加:
display: inline-block;

注意:它可能会改变一些行为.

在HTML中:

<span>JAN-MAR <br /> Q1 Summary</span>

您也可以使用Js,以获得更加动态的方法:

<span >JAN-MAR Q1 Summary</span>

你可以使用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);    });});
总结

以上是内存溢出为你收集整理的html – 如何在span中插入换行符?全部内容,希望文章能够帮你解决html – 如何在span中插入换行符?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1132832.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存