使用 CSS 的文本突出显示(标签效果)

2024-01-10

我想创建类似于标签的文本样式。看这里:

我几乎可以只使用以下方法来做到这一点:http://jsfiddle.net/STApE/ http://jsfiddle.net/STApE/

p{display: inline; background: yellow;}

但是,我想添加一些填充。当我这样做时,事情就会走下坡路。如果我添加边框,也会发生同样的情况:http://jsfiddle.net/JN72d/ http://jsfiddle.net/JN72d/

有什么简单的方法来实现这种效果的想法吗?


我可以通过稍微修改你的 DOM 结构来实现它:

http://jsfiddle.net/Zp2Cm/2/ http://jsfiddle.net/Zp2Cm/2/

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

使用 CSS 的文本突出显示(标签效果) 的相关文章

  • 如何在 Bootstrap 列中使用文本溢出?

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot
  • 显示班级图片 10 秒

    我有下面给出的代码显示9 boxes 其值如下digital time 还有一个班级box002显示digits相当于随机选择的九个盒子的值 box002 can be dragged to digital time starting wi
  • 跨浏览器:禁用输入字段的不同行为(文本可以/不能复制)

    我有一个被禁用的输入 html 字段 在某些浏览器 Chrome Edge Internet Explorer 和 Opera 中可以选择并复制文本 但至少在 Firefox 中这是不可能的 您可以通过在不同浏览器中执行以下代码来测试
  • html 和 body 元素的高度

    我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作 我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些
  • 将样式添加到 mat-autocomplete 的 mat-option

    我有这个 HTML代码在这里 https stackblitz com edit angular mat autocomplete with selected value vx1uqg file src 2Fapp 2Fautocomple
  • 使用 CSS 的平行四边形导航背景

    我正在尝试创建此导航菜单 绿色突出显示是活动页面 灰色是悬停状态 我可以使用以下 CSS 制作平行四边形 ul nav li a text decoration none padding 4px 10px border radius 3px
  • 从 Bootstrap 中删除字形

    如何从 bootstrap 3 中删除所有字形实例 看起来它已经大量嵌入到 css 文件中了 我正在努力使文件大小尽可能最小 只需简单地克隆引导程序https github com twbs bootstrap sass https git
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • 如何阻止破折号自行包裹?

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co
  • 如何在没有@import的情况下减少@import?

    我用的较少 从 Google PageSpeed 我了解到 使用 importCSS 文件中的内容会影响网站速度 所以我想排除任何 import来自我的 CSS 的东西 我有 2 个不同的样式表reset css and rebuild c
  • Vuetify 等高 v-tab-items

    请告知如何使 vuetify v tabs 内容显示在等高块中 我在文档中找不到该组件的选项可以帮助高度对齐 By default v tab item height depends on its own content height 布局
  • CSS3、WebKit 过渡顺序?如何排队等候转场?

    我有以下内容 webkit transition property top bottom z index webkit transition duration 0 5s 问题是我不希望 z index 在顶部和底部完成之前转换 有没有办法告
  • 如何将div对齐到页面底部,而不是屏幕底部

    我想将 div 与页面底部对齐 而不是与屏幕底部对齐 当我这样做时 contact block position absolute bottom 0 left 0 div 被放置在屏幕的底部区域 当我的页面很长时 我必须向下滚动 并且本应位
  • 单击时更改 CSS 属性

    我试图在单击另一个元素时更改一个元素的 CSS 我进行了很多搜索 但没有任何效果是完美的 目前我正在使用下面的代码 但它不起作用 谁能告诉我我错过了什么 div hello world div img src zoom png functi
  • 比例背景图像

    我想放大和缩小页面中的背景图像 我尝试过多种方法 但似乎没有一种方法能按照我想要的方式工作 我的页面的网址是http quaaoutlodge com drupal 7 14 http quaaoutlodge com drupal 7 1
  • Firefox 插件查找未使用的 CSS 样式[重复]

    这个问题在这里已经有答案了 可能的重复 识别未使用的 CSS 定义的工具 https stackoverflow com questions 135657 tool to identify unused css definitions 假设
  • 使用 CSS Flexbox 堆叠图像

    我正在学习使用CSSflexbox 和我想在左侧渲染一个大图像 并在彼此之上渲染两个小图像 我怎样才能使用CSS弹性盒 div class container img class image1 src alt null img class
  • Django css文件缓存

    我有一个 css 文件 我想修改它以满足我的需要 问题是它似乎被缓存在某个地方 因为无论我在 css 文件中做什么 我都看不到更改 我确信我指向了正确的文件 因为现在我已经对其进行了修改 并且它有效 有什么设置可以关闭缓存吗 谢谢 正如本文
  • CSS:将加载指示器放置在屏幕中央

    如何将加载指示器放置在屏幕中央 目前我正在使用一个小占位符 它似乎工作得很好 但是 当我向下滚动时 加载指示器保持在该预定义位置 我怎样才能让它跟随滚动 使其始终位于顶部 busy position absolute left 50 top
  • 使用文本遮盖视频

    是否可以使用 HTML CSS 文本来屏蔽视频 我已经找到并设置了这种工作方式 但没有一种允许文本后面有透明背景 例如 这支笔要求您进行某种填充 它并不是真正掩盖实际视频 而是创造幻觉 https codepen io dudleystor

随机推荐

  • 跨 WP8 和 Win8 识别用户:ANID2 与 SafeCustomerId

    我们有一个 Web 服务 需要跨设备 wp8 和 win8 识别用户 在电话方面我们有UserExtendedProperties GetValue ANID2 其中获取的是匿名 Microsoft ID 在Windows8上有Online
  • 在 Roxygen2 中导出数据,以便无需 data() 即可使用它们

    阅读完诸如此类的问题后这个关于使用 Roxygen 记录数据集的问题 https stackoverflow com questions 9561684 documenting dataset with roxygen2我已经成功记录了一个
  • 多次使用相同的 C++ 访问说明符

    当下一行就在其正下方或下方几行时 一遍又一遍地声明多个 公共 说明符的目的是什么 我可以理解 当代码修改某些标识符的属性时 即隐藏在宏中的标识符的属性 因此更改宏内的访问属性 因此我们需要 重新定义 从宏中出来 或者当每个访问说明符部分有许
  • C# 中的位图(签名的)比较

    我们有一个有趣的项目 要求我们比较两个签名的两个黑白位图 并判断它们是否是同一个人的签名 由于这只是两个加载的位图 而不是从平板电脑捕获的数据 因此该方法与正常的签名识别略有不同 我认为需要执行以下步骤 将位图裁剪为仅签名 尝试进行某种旋转
  • 我可以用volley做同步请求吗?

    想象一下我正在使用一个已经有后台线程的服务 我可以在同一线程中使用 volley 发出请求 以便回调同步发生吗 原因有两个 首先 我不需要另一个线程 创建它会很浪费 其次 如果我处于 ServiceIntent 中 线程的执行将在回调之前完
  • 如何将公历日期转换为伊斯兰(回历)日期?

    我知道这个问题被问了很多次 但我没有找到正确的方法 我有一个String日期如 01 08 1994 我想把它转换成Hijri日期 使用IslamicCalendar java time DateTimeFormatter dateForm
  • 如何命名我们的 JS 以与 Rails 资产管道一起使用

    我理解 Rails 3 1 资产管道背后的原因 我们将所有 JS 编译在一个整洁的 可缓存的文件中 以提高性能 太好了 我们想要那个 然而 加载所有内容也意味着我们必须非常小心 如果我们附加了一些 JS 则不要在多个页面上使用某个 ID 或
  • Razor - 使用 foreach,每第 n 项插入 html

    我使用 Razor 和 MVC 5 在页面上输出大量项目列表 这是我目前拥有的内容 foreach var item in Model Items a item Name a 我想做的是输出以下内容 div class tab 0 a It
  • 在 Eclipse IDE 中使用 GCC 编译器编译 RTX 内核文件

    我们在KEIL IDE中有一个LPC2148的项目 里面有RTX内核程序以及其他程序 它是由ARM CC编译的 现在我们需要将IDE从KEIL ARM CC 更改为Eclipse GCC 当我们尝试在 Eclipse GCC 编译器中编译它
  • 如何在 JS 类中定义私有方法

    我试图为类定义一个私有方法 以测试不能从类外部调用此类方法 但是 即使我使用规范中指示的语法 我也会遇到错误 我还查了MDN 这是我的班级的代码 class CoffeeMachine waterLimit 200 checkWater v
  • 将州和城市与可能的多个单词相匹配

    我有一个类似以下元素的 Python 列表 Alabama edit Auburn Auburn University 1 Florence University of North Alabama Jacksonville Jacksonv
  • 使用 lambda 表达式从 List 获取 N 个最大数字

    这是我的清单 List
  • 为什么基于 RB 树的 C++ std::set 的插入时间基准得到的是常数而不是对数曲线?

    我在以下位置比较了 BST 和 Heap 堆与二叉搜索树 BST https stackoverflow com questions 6147242 heap vs binary search tree bst 29548834 29548
  • 从反应本机的共享文件夹导入

    我正在创建一个 monorepo 来保存我的 React Web 应用程序和 React Native 应用程序 因为它们共享许多通用代码 我想要得到的设置是 Project web native file js should be abl
  • 是否可以使用phoneGap在模拟器中显示动画gif图像

    我在android中使用phonegap框架工作 我的问题是动画gif图像在模拟器中不起作用 在浏览器中它工作正常 我的问题是动画图像不支持phonegap吗 我刚刚在设备和模拟器上测试了这一点 好消息是 它可以在设备上运行 但不能在模拟器
  • 使用 AutoHotKey 右键单击​​ Windows 10 中的托盘图标

    在 Windows 7 中 我有一个 AutoHotKey 脚本 可以自动右键单击托盘图标 Include A Scriptdir TrayIcon ahk TrayIcon Button CCC exe R 其中使用了 TrayIcon
  • 在iOS中录制视频时播放音频文件

    我想在用相机录制时播放音频文件 我使用 AVAudioPlayer 来播放音频 使用 AVCamCaptureManager 来录制 但是当音频开始播放时 预览屏幕冻结 我应该怎么办 感谢您的帮助 这是代码 我正在研究 AVCam 示例 这
  • SQL Server 树查询

    我需要一些帮助是 MS SQL Server 查询 我算不上一个 DBA 我有一个带有组织表的应用程序 该表由父子关系组成 CREATE TABLE dbo Organizations OrgPK int IDENTITY 1 1 NOT
  • 右键单击上下文菜单项是否有最大限制? [复制]

    这个问题在这里已经有答案了 我正在使用以下命令创建自定义右键单击子菜单 在 Windows 注册表中 SubCommands 但是在添加更多选项后 最后的一些选项消失了 允许携带的物品数量是否有上限 如果是这样 有没有办法解决 我使用的是
  • 使用 CSS 的文本突出显示(标签效果)

    我想创建类似于标签的文本样式 看这里 我几乎可以只使用以下方法来做到这一点 http jsfiddle net STApE http jsfiddle net STApE p display inline background yellow