热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Bootstrap4-卡片中的单词包装

如何解决《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


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