CSS:突出显示文本效果

2023-12-05

我试图用一些填充来产生突出显示的文本效果,但填充仅应用于开头和结尾,而不应用于新行。

#highlight {
background: rgba(255,230,0,0.5);
padding: 3px 5px;
margin: -3px -5px;
line-height: 1.7;
border-radius: 3px;
}

<span id=highlight>text<br>here</span>

请看这里:http://jsfiddle.net/CNJZK/7/

是否有任何纯 CSS 修复可以使内部(“锐利”)边缘延伸得更远? 即如下图所示:https://i.stack.imgur.com/ak2EM.jpg


尝试将跨度上的显示设置为内联块:

#highlight {
    background: rgba(255, 230, 0, 0.5);
    padding: 3px 5px;
    margin: -3px -5px;
    line-height: 1.7;
    border-radius: 3px;
    display:inline-block;
}

jsFiddle 示例

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS:突出显示文本效果 的相关文章

  • CSS IE8 无法设置列表元素的样式

    我想制作一个有序列表 居中且没有项目符号 最大的差距是我无法将其风格化到 explorer 8 中 它不能水平对齐 而在所有其他浏览器中却可以 我在网上查了很多资料 但找不到解决方案 我最后一次尝试是复制我在 堆栈溢出 中找到的代码 不浮动
  • 使用 jQuery 实时更新文本

    我最近一直在用 jQuery 做一个项目 但遇到了一个问题 基本思想是创建一些 JS 代码 以便当您在选项卡上的文本框中输入内容时 div 内的文本会随着您的键入而更改 并且当您移动到新选项卡时 它会更改为文本框中的文本那里 这很难解释 所
  • 在 html5 音频播放器时间轴上制作样式

    我想在 html5 音频播放器上制作一个样式
  • LESS 循环中的多个选择器

    我使用以下代码使用 LESS CSS 生成列布局 columnBuilder index when index lt columnCount container columnCount grid index width unit baseW
  • 选择器引擎到底朝哪个方向读取?

    我一直相信 尽管我现在怀疑这些信念的有效性 div name 比以下更快 name 然而我最近读到大多数CSS选择器引擎都是从右向左读取的 在这种情况下第一个例子实际上不会更慢吗 因为选择器引擎只会找到具有名称类别的每个元素 然后必须识别其
  • chrome 不渲染 gif 背景图像

    当前运行 chrome 14 它无法在我的登录页面上呈现旋转的 gif 图形 这是该页面在 Chrome 中的样子 这是它在所有其他浏览器上的样子 重现 http trunk test openmile com login null htt
  • 使用 JavaScript 跨浏览器的 Webkit 背景过滤器

    我看过这个令人惊叹的新演示 webkit backdrop filter blur Xpx 我想问如何用 JavaScript 重现这个至少在 Chrome 中工作但也可能在 Firefox 中工作的情况 演示 https webkit o
  • 如何将transform-origin与SVG结合使用? [复制]

    这个问题在这里已经有答案了 我正在尝试旋转SVG path从它的中心但它不工作 a width 40px height 40px width 40px font size 1 5rem padding 1px overflow hidden
  • jQuery 验证插件错误 CSS

    我想在错误时将标签字体颜色更改为红色或将文本框元素着色为红色 我使用的 CSS 不适合我 并且不确定如何更改单选 文本框的标签 而不是如果验证插件添加的标签错误 HTML
  • 纯 CSS 三角形在 Firefox 中看起来很模糊

    我正在尝试使用本文中 CSS 技巧中使用的纯 css 三角形http css tricks com snippets css css triangle http css tricks com snippets css css triangl
  • 如何在奇数行和偶数行之间交替孩子的数量?

    我搜索了它 但是使用 CSS flexbox 当我想显示奇数行的 3 个项目和偶数行的 2 个项目时出现问题 My idea is something like this 我尝试使用某种nth child选择器 但这并不是完整的解决方案 n
  • Flexbox 中的 Bootstrap 列无法在较小的屏幕上换行

    我的网站有一个部分 我在 2 个 div 上使用下面的 CSS 其中一个a标签以使内容在中心垂直对齐 问题是 使用 Flex 样式属性时 理想情况下 当窗口 col md 4会一个一个地堆叠起来 这并没有发生 相反 列变得非常瘦并且仍然并排
  • Netbeans PHP/javascript 突出显示

    当将 PHP 与 Javascript 混合时 我一直在寻找 NetBeans 7 1 1 代码突出显示错误的解决方案 我也使用 Notepad 这没有问题 Example function showUpload file JS code
  • 无法删除文档底部的空白

    我似乎每次渲染页面时都会生成这个空间块 我不知道它是如何出现在那里的 下面是我在 chrome 中检查时的图像 它发生在其他浏览器中 这是一个问题 因为它位于我的页脚下方 所以我只有空格 似乎没有 CSS 可以解决它 只能直接删除空格 这很
  • 在弹性行中使用“nowrap”时,避免将最后一个元素推离屏幕

    我需要在一行内渲染很长的文本 以及该行末端 屏幕的近端 的图像 给定一个很长的文本 我必须简单地截断它 该文本现在应该进入第二行 因为它太长了 请看我的代码 如何避免将漂亮的表情符号挤出屏幕 请考虑到右侧的元素可能是动态的 所以给出固定宽度
  • 分页后重新显示当前标题

    我正在使用 Wea syPrint 创建文档 我有一些带有名称的部分 其中一些可能跨越多个页面 当节太长时 就会出现分页符 我想做的是重新显示当前部分的名称 最好使用相同的格式 以下 MWE 显示了分页符后如何不显示节标题 h1 First
  • 嵌套最小高度不起作用

    我有一个固定大小的绝对定位区域 其中滚动条包含可变大小的内容 现在我需要将内容包装在两个 div 中 这两个 div 至少与区域一样大 但会扩展以适合内容 div div div div content div div div div 要求
  • 如何选择与绝对定位 DIV 重叠的选项?

    我有一个绝对定位的 div 它的作用类似于工具提示 当鼠标悬停在某个元素上时 它会显示 然后在鼠标移开时隐藏 我有几个
  • IE8 中的 CSS 属性选择器错误?

    指定为CSS 2 1 http www w3 org TR CSS2 selector html attribute selectors input type submit or input type submit 必须匹配 type 属性
  • 如何覆盖 CSS 模块文件中的全局 CSS?

    让我们说在我的global css我有一个 Next js 项目的文件 flex display flex justify content center align items center height 100 我也有一个Layout j

随机推荐