html - CSS突出显示文本后的中断
问题描述
我正在尝试在 CSS 中的文本突出显示之间添加中断(它不会在框中突出显示,而是在行尾之后结束突出显示)
这是它目前的样子:
我的这个块的 CSS 是
h2.slide-title{
background: #89ce40;
padding: 0 0 0 !important;
line-height: 1.3;
box-decoration-break: clone;
text-transform: uppercase;
opacity: 0.9;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
}
.button-medium{
background: #89ce40;
line-height: 1.3;
box-decoration-break: clone;
text-transform: uppercase;
opacity: 0.9;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
}
HTML是:
<div class="slide-caption">
<div class="slide-content">
<h1><strong>COMPREHENSIVE IT SERVICES YOU CAN TRUST</strong></h1>
</div>
<h2 class="slide-title"> Let us help you develop an IT Optimization Strategy and Define your technological priorities </h2>
<a class="slide-link button button-medium" href="http://18.205.33.160/index.php/itone-method/?customize_changeset_uuid=fde7f902-ae22-4db9-abef-fe976403cdb7&customize_messenger_channel=preview-0&customize_autosaved=on" target="_self"> Learn how we can help you succeed </a>
当我添加display: inline;
它时,它会破坏它,对于顶部它会完全删除突出显示,当我为底部部分这样做时,按钮会向上移动到文本的第二段。
解决方案
您可以使用<mark>
标签,然后只编辑它的背景颜色。或者将您的文本包装起来<span>
并为其添加背景。
推荐阅读
- python-3.x - 从命令行作为独立客户端运行python程序(使用pip打包和安装)
- flutter - 分栏符对齐
- linux - Postfix 队列后内容过滤器完整示例
- reactjs - 在控制台中出现错误 Uncaught ReferenceError: arguments is not defined after upgrade the webpack 4 to webpack 5
- vue.js - 重新加载后Vuex状态不包含
- mysql - Redshift 表使用 75GB 磁盘,而 Mysql 上的等效表使用 40GB
- reactjs - 未捕获(承诺中)错误:网络错误:无法获取
- vue.js - vuejs中的条件显示
- cuda - 有没有办法将 128 位从内存直接加载到寄存器?
- flutter - 如何删除颤振中的换行符?