如何在带有水平滚动卡翻转组件的bootstrap 4卡中包含文本

Question

我正在进行水平滚动，允许卡片翻转。我遇到的问题是弄清楚如何将文本包含到卡片中。物业'white-space：nowrap;'在.scrollcards类中，它使文本不在卡片之外。但是，这也是允许卡片滚动的原因。我的问题是如何通过将所有文本包装在卡中来包含文本，同时保持所有其他当前属性的工作状态。 https://codepen.io/zepzia/pen/opyxKy

public function up()
    {
        Schema::dropIfExists('credit_prop_fees');

        Schema::create('credit_prop_fees', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('credit_id');
            $table->integer('credit_prop_id');
            $table->integer('fee_type_id');
            $table->integer('fee_value_id');
            $table->timestamps();
        });
    }

<section>
<div class="container-fluid">
    <div class="row">

  <div class="scrollcards">

            <!-- Card Flip -->
            <div class="card-flip card-main">
                <div class="flip">
                    <div class="front">
                        <!-- front content -->
                        <div class="card">
                          <img class="card-img-top" src="http://via.placeholder.com/350x150" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
                          <div class="card-block">
                            <h4 class="card-title">Card Flip</h4>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                          </div>
                        </div>
                    </div>
                    <div class="back">
                        <!-- back content -->
                        <div class="card">
                          <div class="card-block">
                            <h4 class="card-title">Card Flip</h4>
                            <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                          </div>
                          <img src="http://via.placeholder.com/350x150" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
                          <div class="card-block">
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                          </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Card Flip -->



            <!-- Card Flip -->
            <div class="card-flip-one card-main">
                <div class="flip-one">
                    <div class="front">
                        <!-- front content -->
                        <div class="card">
                          <img class="card-img-top" src="http://via.placeholder.com/350x150" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
                          <div class="card-block">
                            <h4 class="card-title">Card Flip</h4>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                          </div>
                        </div>
                    </div>
                    <div class="back">
                        <!-- back content -->
                        <div class="card">
                          <div class="card-block">
                            <h4 class="card-title">Card Flip</h4>
                            <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                          </div>
                          <img src="http://via.placeholder.com/350x150" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
                          <div class="card-block">
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                          </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Card Flip -->




            <!-- Card Flip -->
            <div class="card-flip-two card-main">
                <div class="flip-two">
                    <div class="front">
                        <!-- front content -->
                        <div class="card">
                          <img class="card-img-top" src="http://via.placeholder.com/350x150" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
                          <div class="card-block">
                            <h4 class="card-title">Card Flip</h4>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                          </div>
                        </div>
                    </div>
                    <div class="back">
                        <!-- back content -->
                        <div class="card">
                          <div class="card-block">
                            <h4 class="card-title">Card Flip</h4>
                            <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                          </div>
                          <img src="http://via.placeholder.com/350x150" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
                          <div class="card-block">
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                          </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Card Flip -->



            <!-- Card Flip -->
            <div class="card-flip-three card-main">
                <div class="flip-three">
                    <div class="front">
                        <!-- front content -->
                        <div class="card">
                          <img class="card-img-top" src="http://via.placeholder.com/350x150" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
                          <div class="card-block">
                            <h4 class="card-title">Card Flip</h4>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                          </div>
                        </div>
                    </div>
                    <div class="back">
                        <!-- back content -->
                        <div class="card">
                          <div class="card-block">
                            <h4 class="card-title">Card Flip</h4>
                            <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                          </div>
                          <img src="http://via.placeholder.com/350x150" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
                          <div class="card-block">
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                          </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Card Flip -->



            <!-- Card Flip -->
            <div class="card-flip-four card-main">
                <div class="flip-four">
                    <div class="front">
                        <!-- front content -->
                        <div class="card">
                          <img class="card-img-top" src="http://via.placeholder.com/350x150" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
                          <div class="card-block">
                            <h4 class="card-title">Card Flip</h4>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                          </div>
                        </div>
                    </div>
                    <div class="back">
                        <!-- back content -->
                        <div class="card">
                          <div class="card-block">
                            <h4 class="card-title">Card Flip</h4>
                            <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                          </div>
                          <img src="http://via.placeholder.com/350x150" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
                          <div class="card-block">
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                          </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Card Flip -->

  </div>

    </div>
</div>

Answer 1

我不确定你希望文本是如何准确的，但是如果你将这个css添加到你的.card-text它将剪辑你的文本（保持它包含）并添加省略号（三个点......）在你的文字的最后。

CSS：

.card-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

这是一个显示结果的jsFiddle：https://jsfiddle.net/0184zgjL/

如果你想让文字可滚动，那么css将是这样的：

.card-text {
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
}

并且会有一个滚动条，允许您查看所有文本。

以下是这种行为的jsFiddle：https://jsfiddle.net/0184zgjL/1/

最终编辑

如果您只是将.card-text中的css更改为white-space: normal，那么它就有效..

.card-text {
    white-space: normal;
}

这是另一个jsfiddle：https://jsfiddle.net/0184zgjL/2/