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:隐藏卡片文本中的溢出 的相关文章

  • Bootstrap 4 菜单切换按钮向左和向右,品牌位于中心

    我有一个导航栏菜单 在大屏幕上看起来像这样 在较小的屏幕上折叠成这样 但我希望一个菜单按钮位于左侧 另一个菜单按钮位于右侧 品牌位于中间 像这样 我不确定这是否可能 如果可以的话 诀窍是什么 代码 使用 bootstrap 4 beta
  • Bootstrap 将容器置于页面中间[重复]

    这个问题在这里已经有答案了 I am brand new to front end and am practising by building a fake e commerce website I ve had a few issues
  • Bootstrap .btn-group 复选框的 onclick 在 JSFiddle 中有效,但在浏览器中无效

    下面的表单包含一个使用复选框的 Bootstrap 切换按钮组 我需要监听复选框输入上的点击事件
  • 在 Ubuntu 11.04 中禁用堆栈崩溃保护

    我在 2007 年 MacBook 上运行 32 位 Ubuntu 11 04 并且刚刚开始了解缓冲区溢出漏洞 我正在尝试运行书中的示例程序 但 Ubuntu 的安全措施使我无法成功执行缓冲区溢出 这是我尝试运行的代码 include
  • 最有效的便携式溢出检测? [复制]

    这个问题在这里已经有答案了 与 C C 和 D 等金属语言类似 检测无符号 64 位溢出的最有效 合理可移植的方式是什么 即不使用汇编程序 尽管您可能假设二进制补码算术和环绕行为 乘法中的整数 通过将无符号类型可表示的最大值除以被乘数之一
  • 如何在角度6中实现内容显示更多和显示更少

    我们有 6 个内容分区 我们还使用字符限制每个 div 我们使用 Bootstrap 4 Angular 6 版本 6 div 一些切换 div 内容打开 一些关闭 https i stack imgur com dS04r jpg这个案例
  • Bootstrap 卡头 - 所有卡头高度相同

    我在两个网页上使用引导卡 在一页上 标题文本是固定的 因此我可以使用 min height 来匹配其卡片标题高度 在第二页上 将生成这些卡片 因此我不知道文本长度和单词 我希望连续的所有卡头都具有相同的高度 有没有办法根据一行中最大的卡头计
  • android webview溢出无法禁用

    我在 android webview 中有一个本地页面 页面的html and body两者都有width 100 height 100 overflow hidden 以及 result popup wrap有以下CSS result p
  • Bootstrap 4 网格系统中的“col”上没有填充是否正常?

    我是第一次使用 Bootstrap v 4 我有一个footer就是使用新的flex col并且它在桌面上运行得很好 但是当我切换到移动设备时 它们彼此堆叠得如此紧密 没有垂直边距 填充 这是正常行为吗 另外 我希望内容居中或至少有一些偏移
  • 无法更改 Bootstrap 4 中的导航栏链接颜色

    我正在尝试更改导航栏的一个链接的颜色 而我尝试了所有方法它仍然具有默认颜色 这是代码 li class nav item signup a class nav link Sign Up a li css navbar light navba
  • INT_MIN % -1 是否会产生未定义的行为?

    gcc 生成浮动代码 引发SIGFPE对于以下代码 include
  • 从 Bootstrap 4 网格中删除装订线

    在 Bootstrap 4 中 我被要求自定义桌面的默认网格系统 如下所示 其中 容器 桌面断点为1280px 我尝试过的例子是 body margin top 3rem l wrap max width 1280px margin rig
  • 中心引导表宽度为 100%?

    table class table table striped table hover table responsive table
  • 带缩略图的轮播和 bootstrap v4

    我看到了带有缩略图的轮播演示bootstrap 3 here http jsfiddle net talmand JS6JV 我正在尝试为 bootstrap v4 实现相同的功能 但无法弄清楚如何修复一些 UI 细节 例如左 右阴影覆盖整
  • 使用溢出支持定位粘性填充材料[重复]

    这个问题在这里已经有答案了 我在用position sticky在我的应用程序中 在使用overflow属性来显示滚动条 我已经寻找了一个确实支持这种情况的polyfill 但到目前为止没有任何运气 有谁知道这样的polyfill shim
  • 扩展位置绝对div超出溢出隐藏div

    我已经好几个月没有做过CSS了 所以我可能会错过一些简单的东西 但无论解决方案是什么 我都无法弄清楚 所以问题就在这里 这是我的代码的简化版本 div style height 100 width 200px div style margi
  • 水平滚动条仅出现在页面底部

    我有一个具有以下 HTML 结构的页面 div class wrapper div The wrapper被设置为min width 1100px至于原因我就不多说了 因此 当浏览器大小调整为小于 1100px 时 我希望出现水平滚动条 我
  • 在 Bootstrap 4 中创建水平表单

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

    div div
  • Bootstrap 使用 SASS 和 fontawesome 图标分隔符修改面包屑

    所以我正在尝试更改默认值breadcrumb与 SASS 的风格 我已经按照官方 Bootstrap 4 beta 3 文档中提到的方式设置了所有内容 我更改了以下内容custom scss breadcrumb divider f105

随机推荐

  • 无法解析: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