引导文本流到卡片外答案

【问题标题】：Bootstrap text flows outside card引导文本流到卡片外
【发布时间】：2019-04-15 07:08:33
【问题描述】：

我在使用 Bootstrap 卡片时遇到了问题，文本在卡片框外流出。我拥有的代码：

<div class="card">
     <div class="card-text">
        <div class="card-block">
          {!! $product->description  !!}
        </div>
     </div>
</div>

我已将word-wrap: break-word !important; 添加到卡片类中，但这无济于事。有人可以帮我解决问题并将我的文字保留在卡片中吗？

HTML 输出：

<div class="card">
                        <div class="card-text">
                            <div class="card-block">
                                <ul><li style="background: none 0px 0px / auto repeat scroll padding-box border-box transparent; border: 0px none rgb(26, 26, 24); color: rgb(26, 26, 24); font-variant-numeric: normal; font-variant-east-asian: normal; height: 20px; left: auto; margin-bottom: 0px; outline-style: none; outline-width: 0px; padding: 0px 0px 0px 16px; position: relative; top: auto; transform: none; vertical-align: baseline; width: 653.42px;">White: 170 g/m², kleur: 180 g/m²</li><li style="background: none 0px 0px / auto repeat scroll padding-box border-box transparent; border: 0px none rgb(26, 26, 24); color: rgb(26, 26, 24); font-variant-numeric: normal; font-variant-east-asian: normal; height: 20px; left: auto; margin-bottom: 0px; outline-style: none; outline-width: 0px; padding: 0px 0px 0px 16px; position: relative; top: auto; transform: none; vertical-align: baseline; width: 653.42px;">100% katoen</li><li style="background: none 0px 0px / auto repeat scroll padding-box border-box transparent; border: 0px none rgb(26, 26, 24); color: rgb(26, 26, 24); font-variant-numeric: normal; font-variant-east-asian: normal; height: 20px; left: auto; margin-bottom: 0px; outline-style: none; outline-width: 0px; padding: 0px 0px 0px 16px; position: relative; top: auto; transform: none; vertical-align: baseline; width: 653.42px;">Gevormde zijnaden met zijsplitjes voor een vrouwlijke pasvorm</li><li style="background: none 0px 0px / auto repeat scroll padding-box border-box transparent; border: 0px none rgb(26, 26, 24); color: rgb(26, 26, 24); font-variant-numeric: normal; font-variant-east-asian: normal; height: 20px; left: auto; margin-bottom: 0px; outline-style: none; outline-width: 0px; padding: 0px 0px 0px 16px; position: relative; top: auto; transform: none; vertical-align: baseline; width: 653.42px;">Smalle knoopsluiting met gelijkgekleurde knopen</li><li style="background: none 0px 0px / auto repeat scroll padding-box border-box transparent; border: 0px none rgb(26, 26, 24); color: rgb(26, 26, 24); font-variant-numeric: normal; font-variant-east-asian: normal; height: 20px; left: auto; margin-bottom: 0px; outline-style: none; outline-width: 0px; padding: 0px 0px 0px 16px; position: relative; top: auto; transform: none; vertical-align: baseline; width: 653.42px;">1x1 ribgebreide manchetten</li></ul>
                            </div>
                        </div>
                    </div>

【问题讨论】：

能否提供 HTML 输出（不是 Blade 模板）？
@ThomasEdwards 已编辑！
谢谢！ width: 653.42px; 可能会覆盖该盒子的任何容器——是否可以将其移除？
@ThomasEdwards 是的，在页面中删除它是可行的！现在我必须找到这个疯狂的风格属性来自哪里..
啊，太好了，听起来像是所见即所得的东西——祝你好运！

标签： laravel twitter-bootstrap bootstrap-4

【解决方案1】：

制作 height:auto 可以解决您的问题。

【讨论】：

不，它不会：}问题是她设置的宽度超过了它需要的宽度。

【解决方案2】：

显式 width: 653.42px; style 属性将覆盖 Bootstrap 定义的任何 CSS 属性。

【讨论】：