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:突出显示文本效果 的相关文章

  • 如何为 HTML 元素创建鼠标拖动滑块?

    我发现的许多滑块插件要么仅单击以查看下一个图像 要么如果它们确实具有鼠标拖动或触摸拖动功能 则仅允许图像 有谁知道为任何 html 元素编写鼠标拖动滑块的插件或可能的方法 我专门使用 SVG 但将来如果能在 div 元素之间滑动就更好了 H
  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope
  • 使用 css 简单地将对象居中,无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 响应式图像 - srcset 和尺寸属性 - 如何正确使用两者:基于设备像素比和基于视口的选择一起?

    到目前为止 我经常读到这个问题 并且它也发生在我自己的项目中 这里介绍一下我到目前为止所发现的关于 srcset 和 size 属性的内容 关于如何使用有两种不同的可能性srcset 属性 来源 w3c http w3c github io
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • 使用jquery和javascript水平滑动div

    我正在尝试在 关于我们 页面中显示我的推荐 我在那里用 3divs水平样式可同时显示 3 个推荐 这里我想做的是我想添加一些滑动效果与查询消失 1st 3divs然后需要加载2nd 3divs与不同的推荐 等等 我做了HTML和CSS 但不
  • 挂钩 jQuery 验证消息更改

    我想在工具提示中显示 jQuery 验证消息 为了实现这一目标 我首先将以下 CSS 规则添加到我的样式表中 fieldset field validation error display none fieldset field valid
  • 用纯JS检查元素是否有背景图片?

    检查特定元素是否具有的正确方法是什么background image与它相关联 在纯Javascript中 现在我有这个 var elementComputedStyle window getComputedStyle element va
  • Gatsby - 将 Google 字体添加到 Gatsby 网站

    我正在尝试在我的 Gatsby 网站中添加 Google 字体 Mukta Malar 我看过很多关于将 Google 字体添加到 Gatsby 网站的文章 其中大多数似乎都使用了这个插件 gatsby plugin prefetch go
  • 如何使用 ng-repeat 更改 AngularJS 中特定 的背景颜色

    如何为每一行设置不同的背景颜色 举个例子 第 1 行 蓝色 第2行 红色 第三行 绿色 main js scope names fName John lName David fName Richard lName Daniel fName
  • 为什么 inline-block 会根据子元素的宽度自动调整宽度?

    如果这个问题已经在 stackoverflow 上提出过 请纠正我 如果确实如此 我深表歉意 但我已经寻找了一段时间并且只找到了hows not whys 我的问题是 父 div 似乎会自动占据页面的整个宽度 除非 display inli
  • Firefox 30 不再隐藏选择框箭头

    我一直使用的 技巧 是 select moz appearance none text indent 0 01px text overflow 在 FF 上进行自定义选择框 但自从版本 30 发布以来 它完全停止工作 我试图找出这是否已被弃
  • 如何使 CSS 样式覆盖 JavaScript 应用的样式

    我动态创建一个 HTML 表 并应用一些样式 var tbl document createElement table tbl id CrewMemberTable document getElementById CrewMemberPan
  • 纯CSS代码,没有绝对定位

    我试图想出一个纯CSS代码 就像你在电视上看到的那样 仅not粘在屏幕底部 我已经找到了涉及 JS 的东西 但我正在努力避免 JS 我还发现了一些其他人创建的纯 CSS 代码 但这些的问题在于它们都使用position absolute 这
  • 是否可以对 Flexbox 插入、删除和项目位置进行动画处理?

    这个问题最初是在 2012 年提出的 https stackoverflow com questions 11106876 is it possible to animate flexbox inserts removes但是提供的答案并未

随机推荐