首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Bootstrap4-卡片中的单词包装

作者：可卡因 | 来源：互联网 | 2023-02-11 19:58
如何解决《Bootstrap4-卡片中的单词包装》经验，为你挑选了1个好方法。

我怎样才能用文字包装文字.

这是问题:plunker链接

你知道怎么解决它吗？



1> andreas..：

你需要两个规则:

max-width对于你的.card元素(因为没有定义宽度CSS将不知道在哪里打破你的长词)或 overflow: hidden;使.card宽度不再取决于长字长

word-wrap: break-word; 告诉浏览器打破一个字

.card {
    max-width: 100%;
}
.card-text {
    word-wrap: break-word;
}


.card {
  overflow: hidden;
}
.card-block {
  word-wrap: break-word;
}


  

    

      

        
Card title

        
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

        
Last updated 3 mins ago
        

      

    

    

      

        
Card title

        
This card has supporting text below as a natural lead-in to additional content.

        
Last updated 3 mins ago
        

      

    

    

      

        
Card title

        
supportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingto additional content. This card has even longer content than the
          first to show that equal height action.

        
Last updated 3 mins ago

推荐阅读
  • go

    入门Java需熟练掌握哪些技术呢？

    入门Java需熟练掌握哪些技术呢？
    Java工程师无疑是当下令人艳羡的工作之一，因此，每年都有大批大批的朋友想要报名Java工程师学习Java也就不奇怪了。那么入门Java掌握哪些技术能力 ... [详细]
  • php

    AngularJS 提交表单的方式(一)

    AngularJS 提交表单的方式(一)
    英文原文：SubmittingAJAXForms:TheAngularJSWay在AngularJS出现之前，很多开发者就面对了表单提交这一问题。由于提 ... [详细]
  • php

    前端库Bootstrap框架：「11]使用 span 创建行内元素

    前端库Bootstrap框架：「11]使用 span 创建行内元素
    前端库Bootstrap框架：「11]使用 span 创建行内元素 ... [详细]
  • go

    前端实用的CSS3技巧有哪些

    前端实用的CSS3技巧有哪些
    本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ... [详细]
  • go

    微软头条实习生分享深度学习自学指南

    微软头条实习生分享深度学习自学指南
    本文介绍了一位微软头条实习生自学深度学习的经验分享，包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性，并提供了一些建议。 ... [详细]
  • go

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • case

    Open judge C16H: Magical Balls 快速幂+逆元问题解析

    本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法，并给出了问题的解析和解决方法。详细介绍了问题的背景和规则，并给出了相应的算法解析和实现步骤。通过本文的解析，读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]
  • go

    Java 11相对于Java 8，OptaPlanner性能提升有多大？

    Java 11相对于Java 8，OptaPlanner性能提升有多大？
    本文通过基准测试比较了Java 11和Java 8对OptaPlanner的性能提升。测试结果表明，在相同的硬件环境下，Java 11相对于Java 8在垃圾回收方面表现更好，从而提升了OptaPlanner的性能。 ... [详细]
  • go

    从零基础到精通的前台学习路线

    从零基础到精通的前台学习路线
    随着互联网的发展，前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线，包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习，可以掌握前台开发的基本技能，并有能力找到一份月薪8000以上的工作。 ... [详细]
  • go

    cisco路由器的寄存器值（忘记密码时要进机器时候用的）

    本文摘要配置目的：寄存器配置用于更改路由器启动过程。配置目的：寄存器配置用于更改路由器启动过程。启动位由4位16进制寄存器组成格式：0xA ... [详细]
  • go

    使用jquery去掉时光轴头尾部的线条

    一、前言：以前做类似时光轴的结构，几乎都是一条灰色线飞流直下，没有尽头。今天这个线条是从第一个圆点到最后一个圆点，那么问题来了，内容的高度还不是固定的，线条的长度怎么确定？怎么就能刚刚好从第一个点到最 ... [详细]
  • go

    css3中rem 与px算法

    css3中rem 与px算法
    看CCS文件的时候发现引入了一个新大小单位：rem，CSS文件里有介绍，看半天拿着手机计算了几下愣是没搞明白，怕是新东西搜出来的都是英文看着累就没找google，而是百度了一下，百度 ... [详细]
  • go

    一篇文章搞定css3 3d效果

    一篇文章搞定css3 3d效果
    css33d学习心得卡片反转魔方banner图首先我们要学习好css33d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴y轴z轴是什么概念了。首先先给大家看一个小 ... [详细]
  • case

    如何使用JavaScript动态设置CSS3属性值

    这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读 ... [详细]
  • go

    试图实现向上箭头 - trying to achieve arrow pointing upwards

    Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ... [详细]
author-avatar
可卡因
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有