Tips on keeping text within a Bootstrap 4 card using a horizontal scroll card flip feature

Currently, I am working on developing a horizontal scroll feature that allows for cards to flip. One issue I am encountering is how to keep the text within the cards while still enabling scrolling functionality. The 'white-space: nowrap;' property in the .scrollcards class causes the text to overflow from the cards, although it is essential for the scrolling effect. My main concern is finding a way to wrap the text within the card boundaries without compromising any other existing properties. Check out my progress here: https://codepen.io/zepzia/pen/opyxKy

<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 -->

<!-- Repeat similar code blocks for additional card flips -->

  </div>

    </div>
</div>
javascriptcssbootstrap-4

Answer №1

If you're looking to contain your text and add ellipsis at the end, you can achieve that by applying this CSS to your .card-text class.

CSS:

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

Check out the result in this jsFiddle: https://jsfiddle.net/0184zgjL/

If you prefer a scrollable text, here's the CSS for it:

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

You'll see a scrollbar to navigate through the entire text.

View the scrollable behavior in this jsFiddle: https://jsfiddle.net/0184zgjL/1/

FINAL UPDATE

To make the text work with normal spacing, simply update the CSS in your .card-text class to white-space: normal.

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

Take a look at another example in this jsFiddle: https://jsfiddle.net/0184zgjL/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When we modify the prototype of the parent object, where does the __proto__ point to?

Typically, when a new object is created using the "new" keyword, the __proto__ property of the newly created object points to the prototype property of the parent class. This can be verified with the following code: function myfunc(){}; myfunc.prototype.n ...

javascriptoopprototype

MySQL field being updated upon page unload

I'm currently developing a Content Management System (CMS) that allows users to access and organize records within a MySQL database. One of the features I have implemented is a user login system for the CMS. As part of this project, I am working on in ...

javascriptphpmysqlajaxonbeforeunload

Turn off csrf protection when an internal express route is accessed

I have a simple code snippet that implements csrf protection: import csrf from 'csurf'; const csrfProtection = csrf({ cookie: { httpOnly: true, secure: process.env.NODE_ENV === 'production', }, }); app.use(csrfProtection) ...

javascriptnode.jsexpresscsrf

Express.js in nodejs has encountered an issue known as Error [ERR_HTTP_HEADERS_SENT], which occurs when attempting to set headers after they have already been

An issue with setting headers after they have been sent to the client is causing the Error [ERR_HTTP_HEADERS_SENT]. Despite attempting to handle it with a try-catch block, the error persists. Can someone provide insights on how to resolve this and its unde ...

javascriptnode.jsexpresserror-handlingnode-modules

The input field cannot be accessed via touch on mobile devices

<div class="form-group row pswrd" style="padding: 0px 10px"> <div id="email" class="col-md-12 col-xs-12"> <input type="password" class="form-control c_fname" id="c" #pswd name="password" placeholder="password" [(ngModel)]="user.passwor ...

htmlcssangular

How can you determine the location of a point on the perimeter of a regular polygon?

Imagine you have a pentagon, with numbered sides like moving around a clock: https://i.sstatic.net/pWqdFtfg.png Starting from the center of the polygon, how can you calculate the position of a point in these locations (along the edge of the polygon): At ...

javascriptcssmathpolygontrigonometry

Picture featuring Bootstrap's column/div layout being broken

I'm encountering some challenges with integrating TinyMCE and Bootstrap into a CMS I built. On a particular page, there's a div outlined where users can select images from a modal by clicking on it. The selected image is then inserted into a Tin ...

htmlcssbootstrap-4tinymce

What is the best way to show the number of times a button has been clicked using javascript?

My task is to create a button that updates the status bar after each click, displaying "You have generated numbers x times" where x represents the number of times the button has been clicked since the page loaded. Below is my current code for a random num ...

javascriptjquerybutton

Tips for making Google search results include query strings in the returned links

I need help figuring out how to make Google search results show a URL containing a query string. Here's an example from the project I am currently working on: Instead of this link, Google search returns: If anyone has any suggestions for fixing this ...

javascriptphpcsssitemapgoogle-search-console

Nuxt.js - Struggling to Remove Event Listener

I am currently utilizing nuxt.js and have implemented a scroller that scrolls and stops at a specific point on my page. However, when I navigate to the next page, the method is still searching for the element with $ref=nav which no longer exists, resultin ...

javascriptvue.jsnuxt.js

"Attempt to create angular fork results in an unsuccessful build

I have recently created a fork of angularJs and I am facing an issue when trying to build it. The build process fails when running grunt package npm -v --> 3.5.2 bower --version --> 1.7.2 I followed the steps provided in the official documentation ...

javascriptangularjsgruntjsnpm

Hide one div when another is toggled

Once an image is clicked, a div appears using toggle. I want the initial div to disappear when the second one toggles, and tried using the .css function in JavaScript for this purpose. However, it only applies to the first case as it receives information f ...

javascriptphpjqueryhtmlcss

What is the best way to display the data model in Angular as HTML?

I am facing an issue with my data-model where it needs to be converted or displayed as HTML, but currently it is only appearing as plain text. Here is the HTML code snippet: <div ng-repeat="item in ornamentFigures" class="ornament-item"> <la ...

javascriptangularjs

What is the process for sending a post request with a JSON payload to an external API using Node.js?

I am currently facing an issue while attempting to send a POST request with a JSON payload to an external API using node.js. Below is the code I am using: var express = require('express'); var bodyParser = require('body-parser'); var ...

javascriptnode.jshttpexpress

Enhance the tooltip information on the Plotly chart by incorporating additional data points

I'm looking to enhance the tooltip by displaying additional data, but it's only showing %{customdata[0]} instead of the actual value. I've tried using customdata in the following way, but it doesn't seem to be working. { "name ...

javascriptplotlyplotly.js

Incorporate an image into a Component template by utilizing a URL that is provided as a property of the Component in Vue and Vite

One of the challenges I faced was setting the 'src' attribute of an image in a Component's template from a property value. Initially, I attempted to do this as follows: Gallery View, where the Component is called multiple times <script s ...

javascriptvue.jsvite

JavaScript's eval function returns Octal instead of decimal values

Having an issue with my HTML calculator that uses JavaScript. Sometimes users input values like 010 instead of 10, resulting in incorrect octal calculations by the eval function. Example 1: eval('20*15+8*10'); Result: 380 (Correct) Example 2: e ...

javascripthtmleval

Verify whether the array containing objects includes a specific object

I'm currently attempting to determine whether an array of objects contains a specific object. I would like the function to return true if there is an object in the array that has identical values, regardless of the object id. Here's how I initial ...

javascriptarraysnode.jsjson

Determining if a date has passed using moment.js, focusing solely on the date

Is it possible to determine if a date has passed based solely on the date itself? Currently, I am using !moment(moment().format("LLL")).isBefore(moment.unix(data.dueDate._seconds).format("LLL")). However, this approach also takes into account the time. F ...

javascriptreactjsnext.jsmomentjs

Tips for creating a continuous scroll up and down animation within an overflow container using React

Currently, I am dealing with an overflow list of items that has a fixed height to ensure it can always be scrolled. The desired effect is for the overflow div to scroll down its content over a span of 4 seconds with a 0.5-second delay, and then scroll up ...

javascriptreactjsoverflowreact-hooksscrolltop