Bootstrap 4:隐藏卡片文本中的溢出

2024-01-11

我有一张 bootstrap 4 卡,我想在其中隐藏字幕的溢出(并显示“...”)。我怎样才能实现这个目标?如果可能的话使用纯引导代码......

<div class="card-block p-1">
    <p class="card-title">Test object</p>
    <p class="card-subtitle text-muted">Added by Someone with a long name</p>
    <p class="card-text mx-auto text-center"><span class="badge badge-pill badge-danger">€ 800</span></p>
</div>

只需使用text-truncate实用类..

  <div class="card">
    <div class="card-block p-1">
      <p class="card-title">Test object</p>
      <p class="card-subtitle text-muted text-truncate">Added by Someone with a long name</p>
      <p class="card-text mx-auto text-center"><span class="badge badge-pill badge-danger">€ 800</span></p>
   </div>
 </div>

https://www.codeply.com/go/bZufg6X1So https://www.codeply.com/go/bZufg6X1So

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

Bootstrap 4:隐藏卡片文本中的溢出 的相关文章

  • Bootstrap4使卡头高度相同

    以 Bootstrap 4 的定价模板为例 假设我有不同文本长度的卡片标题 因此在某些屏幕分辨率下 卡片标题的高度会变得不同 我想确保它们始终具有相同的高度 div class container div class card deck m
  • C 整数溢出

    我正在使用 C 中的整数 试图探索更多关于何时以及如何发生溢出的信息 我注意到 当我添加两个正数时 其总和会溢出 我总是得到一个负数 另一方面 如果我添加两个负数 其总和溢出 我总是得到一个正数 包括 0 我做了一些实验 但我想知道这是否适
  • Bootstrap 4 网格系统中的“col”上没有填充是否正常?

    我是第一次使用 Bootstrap v 4 我有一个footer就是使用新的flex col并且它在桌面上运行得很好 但是当我切换到移动设备时 它们彼此堆叠得如此紧密 没有垂直边距 填充 这是正常行为吗 另外 我希望内容居中或至少有一些偏移
  • CSS:最后一个子元素的高度应基于前一个兄弟元素,但不能溢出父元素

    相关 JS Fiddlehttp jsfiddle net arosen FMQtR http jsfiddle net arosen FMQtR Problem 我的 HTML 看起来像这样 div div A variable amou
  • 在 Bootstrap 4 中创建水平表单

    我是初学者引导程序我正在使用 bootstrap 来设计表单 我正在尝试使用创建水平形式form horizontal引导类BUT标签和文本字段未显示在同一水平线上 我看过有关它的教程 并且我从该教程中复制了相同的代码 但它对我不起作用 而
  • 如何检查 bootstrap-4 模式是否已经打开?

    我想检查某个模式是否已经打开 我已经尝试过这种方法 bootstrap 4 但对我不起作用 即使对话框打开 也总是给出 false myModal is visible myModal data bs modal isShown myMod
  • CSS3 属性 webkit-overflow-scrolling:touch 错误

    iOS 5 发布了网页设计师的新属性 webkit overflow scrolling touch它使用 iOS 设备硬件加速器为可滚动 div 提供本机滚动 当在我们的开发网站上实施时 它确实有效 但效果不佳 我相信可能存在 CSS 问
  • CSS问题-水平滚动条隐藏内容

    我对此有一个问题 因为它给了我滚动条 但高度保持不变 因此文本被滚动条覆盖 td class messages div style border 0px padding 0px width 100 background color 66C2
  • 导航栏是垂直的而不是水平的

    div div
  • 如何使用固定宽度的卡片制作卡片组?

    我想做一个响应式的卡牌 https getbootstrap com docs 4 0 components card card decks使用引导4固定宽度卡片 https getbootstrap com docs 4 0 compon
  • Bootstrap 4 Beta 0 网格系统上的 Rowspan

    您好 我正在开发一个使用 Bootstrap 4 Beta 的电子商务模板 我让它在移动设备上工作 但在桌面设备上我不知道如何让购买按钮保持在标题下 在我的方法中 它出现在 图库 部分下 Desired Desktop Desired Mo
  • 模态仅在第二次单击后显示

    我正在 vue2 中以 1 个组件 1 个文件样式进行开发 我有一个通过 Bootstrap Vue 表组件构建的表 我使用提供程序向它传递一个项目 其中一列包含每行的修改按钮 这些按钮触发引导模式 我使用 V if 来初始化表及其属性
  • 从 jQuery UI 对话框调用 Bootstrap 模式:超出最大调用堆栈大小

    我有一个有点奇怪的问题 我正在调用 Bootstrap Modal 同时打开了 jQuery UI 对话框并且正在获取RangeError Maximum call stack size exceeded 在控制台中 奇怪的是 只有当我在打
  • 表格底部的粘性滚动条

    我不确定 粘性 是否是这个术语 但是有没有办法使滚动条overflow auto保持可见 我有一个相当大的表格 我希望它可以水平滚动 但是 表格也相当高 因此当页面加载时 水平滚动条不在浏览器的视口内 因此很难判断表格是否可滚动 div s
  • 在引导程序中以编程方式更改选项卡窗格选项卡

    我使用的选项卡窗格定义为 ul class nav nav tabs li a href personal Personal Information a li li class active a href contact Contact a
  • Bootstrap 4.1 中悬停时的下拉菜单

    我有一个网站 我在其中创建了下拉菜单引导程序4 1 https getbootstrap com docs 4 1 dist css bootstrap min css 此时 下拉菜单正在点击 我用来创建下拉列表的 HTML 代码是 div
  • 当鼠标悬停在上面时制作一个 React Bootstrap NavDropdown 下拉菜单

    我试图让 React Bootstrap 中的下拉菜单栏在您显示选项时hover超过它 我到处查看 所有解决方案似乎都已过时并且不起作用 如果您能够解决此问题 请告诉我 这是我尝试将更改应用到的下拉菜单
  • 如何在 Bootstrap 4 轮播中堆叠多个图像

    我不知道如何使用 Bootstrap 4 以及如何在一张幻灯片中显示多个小图像 例如缩略图 而不是让图像填充轮播的宽度 我已经使用下面的代码尝试了一些操作 但仍然无法堆叠很多图像 div class container h2 class t
  • Bootstrap 4.2.1 - 无法在“文档”上执行“querySelector”:“javascript:void(0);”不是有效的选择器

    我正在开发一个我开始构建的项目引导程序4 0 0 在这个项目期间 每当引导程序的新版本 4 1 0 4 1 3 出现时 我都会定期更新引导程序 并且所有事情都运行良好 直到我更新到引导程序4 2 1从那里 当我单击文档时 我在控制台中遇到了
  • 如何使Bootstrap 4兼容IE9和IE10

    哪些 polyfill 库可用于使 Bootstrap 4 或 Bootstrap 4 的大部分 与 IE 9 兼容 我遇到过这些库 https github com jonathantneal flexibility https gith

随机推荐

  • 无法解析:com.osbcp.cssparser:cssparser:1.5 HtmlSpanner-NightWhistler

    我综合了html扳手进入我的 Android 应用程序 我收到以下错误 无法解析 com osbcp cssparser cssparser 1 5 我该如何解决这个错误 感谢帮助 该库不在标准中Maven存储库 即Gradle用于解决依赖
  • 在 MySQL 中导入 CSV 数据时空整数字段的默认值

    我正在将 CSV 导入到 MySQL 表中LOAD DATA INFILE 表的字段之一存储邮政编码数据 我已在表结构中定义了该数据contributor zipcode INT 在 CSV 中 此字段有时为空 当我执行LOAD查询时 My
  • System.Diagnostics.Stopwatch 的准确度如何?

    有多准确系统 诊断 秒表 我正在尝试为不同的代码路径做一些指标 并且我需要它是准确的 我应该使用秒表还是有其他更准确的解决方案 有人告诉我 有时秒表会给出不正确的信息 我刚刚写了一篇文章 解释了如何进行测试设置才能使秒表获得高精度 优于 0
  • 下移工作目录中的文件夹

    我正在尝试直接在 R 中向下移动工作目录 例如 我有一个 foo bar 工作目录 我想移动到 foo bar 子文件夹 setwd Users foo bar getwd 1 Users foo bar setwd subfolder 然
  • 底图上没有绘制带有networkx的虚线

    我尝试用以下方法绘制虚线边缘networkx on a basemap线 一切都很好 除了style dotted 设置此标志后 没有任何更改 我仍然得到正常的实心边缘 有人知道我可以改变什么来在地图上得到虚线吗 我的错误在哪里 这是我的完
  • PHP - WAMP 和 Web 服务器上的浮点数精度差异

    我知道 php 浮点数不准确 https www php net manual en language types float php我知道像这样的解决方案BCMath https www php net manual en book bc
  • 如何覆盖 XAMARIN.FORMS 的加载视图

    选择任何列表视图时如何使用覆盖活动指示器
  • IdentityServer4登录API

    我使用 IdentityServer4 来保护我的 API 并验证用户身份 客户端是主要的 ASP NET Core MVC 应用程序 我只希望登录界面和 UI 位于 MVC 应用程序处 登录实现位于 IdentityServer 处 所以
  • 静态页面的 htaccess 条件 https

    我的网站是已启用 HTTPS所有页面均使用仅 HTTPS 客户现在有他想要的要求显示静态页面 例如about us termsofus作为 HTTP 页面而不是 HTTPS 这意味着即使用户尝试打开about us页面作为 HTTPS 它应
  • 在 Redshift 中匹配连续数字 REGEXP_REPLACE

    我正在尝试从 Redshift 中的字符串中删除连续的数字 From 16 16 16 3 3 4 16 16 我想要得到 16 3 4 16 以下构造对我不起作用 SELECT regexp replace 16 16 16 3 3 4
  • 将flutter web和desktop添加到android studio中现有的flutter(android/ios)项目中

    我知道这可能还为时过早 但我想尝试在一个项目中使用完整的 flutter 现有跨平台支持 稳定性不是我主要关心的 我已经在 android studio 中启动了一个 flutter 项目 当然我 android Ios 进展顺利 但我很想
  • VS 2010,编码的 UI 测试:重新运行失败的测试用例

    我正在使用 VS2010 Premium 编码 UI 测试 您知道如何在运行后重新执行失败的测试用例吗 如果重新执行后测试通过 则应在结果报告中记录通过 不是最佳方式 但您可以将所有代码放入try catch如果抛出异常 则阻止并重新运行测
  • 当用户离开页面时,如何检测表单中未保存的数据?

    当用户离开页面而不提交表单时 我需要检测表单中未保存的数据 我想实现这一点 而不为每个输入添加值更改侦听器 这是功能要求 如果页面中的值发生更改 用户打开页面而不是单击任何链接 则会弹出警报消息 通知用户他需要保存更改的数据 但如果没有更改
  • 无法从 Strapi API 获取数据到 next.js 前端

    我尝试过 Strapi 和 next js 来制作博客网站 这是前端代码的 next js import Head from next head import styles from styles Home module css expor
  • 纯javascript:为可拖动元素设置边框

    再会 学习 Javascript 并尝试在容器内制作可拖动的元素 如何设置可拖动边框以使元素无法移动到其之外 现在 当您将某些内容拖动到底部或右边框时 我遇到一个问题 该元素会移到容器之外 fiddle https jsfiddle net
  • 22秒是在mysql中插入500行的好时间吗?

    以下 php 脚本的执行时间约为 22 秒 正常吗 如果不是的话 什么会导致它执行缓慢 conn mysql connect localhost root 123 mysql select db mydb conn time1 time f
  • Google Cloud HTTP 平衡器和 gzip

    当我使用 Google Cloud Network Load Balancer 时 所有 HTTP gzip 连接都保持不变 但是当使用 HTTP S 负载均衡器时 最终用户无法获得 gzip 压缩的内容 我在虚拟机上使用 nginx 使用
  • 读取 XML 文档时如何使用 XComment?

    我正在使用以下行读取 XML 文档 该文档可能有也可能没有一些用 括起来的注释 靠近我的 XML 文件的顶部 XDocument xe1 XDocument Load filepath 如何读取评论并将其存储为字符串 我正在 MS Visu
  • 调试前运行批处理脚本

    我想每次在启动程序进行调试之前运行批处理脚本 对于构建事件 此类功能是使用预构建事件 构建后事件来实现的 对于实际调试 我找不到任何预调试 调试后事件 如何实现这个场景呢 我正在使用 VS2008 net Framework 3 5 C 应
  • Bootstrap 4:隐藏卡片文本中的溢出

    我有一张 bootstrap 4 卡 我想在其中隐藏字幕的溢出 并显示 我怎样才能实现这个目标 如果可能的话使用纯引导代码 div class card block p 1 p class card title Test object p