Incorporate periods after text with CSS

After creating an ASP page to showcase events, I decided to limit the content displayed in each item template to three lines using CSS.

Now, I am looking to add three periods after the text to signify that there is more content available.

I tried using .after{content:"..."} as a solution found online, but the dots ended up on a new line and not inline as I wanted based on the image reference.

Below is a snippet of my CSS:

        .eventDescription
        {
        height: 45px;
        margin-left: 65px;
        font-size: 15px;            
        line-height: 1.5em;
        overflow: hidden;
        text-align: justify;
        line-height: 15px;
        padding-top: 10px;
        width: 220px;            
        }  

Answer №1

To create a design with dots, utilize the :after pseudo class in combination with the content property

View Demo


You have the ability to adjust the spacing or size of the dots by using the font-size and letter-spacing properties respectively.

Check out another Demo here


In your code snippet, you are employing .after{content:"..."}. Firstly, ensure that you assign a class to the element like so: <p class="after">. Additionally, remember to include the :after pseudo class within your .after class.

.after:after {
   content: "...";
}

Note: When using :after, the content will be displayed inline by default. To apply margins or paddings, use inline-block;. Please note that older versions of Internet Explorer may not fully support this property.

For further details on browser compatibility of :after, refer to this link

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

Is it possible to implement CSS code from a server request into a React application?

With a single React app that hosts numerous customer websites which can be customized in various ways, I want to enable users to apply their own CSS code to their respective sites. Since users typically don't switch directly between websites, applying ...

Watch MP4 videos using the videotag feature in the Firefox browser

It seems like a form of play, since Instagram uses it and the only compatible format is mp4. However, I'm unsure how to get it to play. Any advice? ...

Alert: Error encountered while attempting to locate the Angular Material core theme within Angular 3, Angular Material, and Angular Material Experimental

After successfully implementing a custom color palette with Material 3 and Angular Material Experimental, I am encountering a warning in the console stating "Could not find Angular Material core theme. Most Material components may not work as expected. For ...

Issues encountered with certain Tailwind styles functioning improperly when deployed in a production environment with Next.js

It seems that there are some style issues occurring in the production build hosted on Netlify for a specific component. The problematic component is a wrapper located at ./layout/FormLayout.tsx. Below is the code for this wrapper: const FormLayout: React.F ...

Modify website styling using JavaScript to edit external CSS/SCSS files

I am looking to 'modify' a file that is stored on my server, for example: <link rel="stylesheet" href="css/plugin.scss"> Not only that, but I also want to specifically edit a line within the SASS file. In SASS, you can declare variables i ...

Are there any alternative methods to refresh the Google Search Result for my website? (Meta tags are ineffective)

I'm facing an issue with the Google search result of my website where it's displaying old text instead of what I intended. I've tried using meta tags like nosnippet and description, but the problem persists. Can anyone suggest resources or ...

Exclude the footer from the index.html file by configuring it in the docusaurus.config.js file

From what I understand, the docusuarus.config.js file is responsible for translating specified information into HTML to construct your website. This translated information is then directed to the 'index.html' file. However, I am encountering an ...

Transferring a PHP variable via a URL

I'm having a bit of difficulty passing the value of a variable named artID as part of an href link. It seems like where I place this variable impacts whether or not the link actually works. If it's outside of the PHP tags, the link breaks, but if ...

Submitting a multi-step form using ajaxWould you like to know the process for

I'm attempting to submit the form without refreshing the page. I'm using a library for a multi-step form, but it forces the form submission by loading the form action at the end. I tried to prevent this by setting form.submit to false, but then i ...

Authentication for Microsoft chat bot

Can a chat bot created using the Microsoft Bot Framework be authenticated to ensure only authorized users can access it? ...

In React, CSS @media queries are specifically designed to function only within the Device Mode of Developer Tools

As indicated by the title, I have designed a responsive web app using the React framework along with various @media queries. When I resize the page in Developer Tools' Device Mode, the queries work perfectly fine and everything functions as expected. ...

Enhancing text with custom gradient using CSS styling

I am facing an issue where uploading an image with text is not helpful for Google search visibility. I am looking to add a specific gradient style to my text. Could anyone assist me in achieving this particular text look that I have in mind? I came acros ...

Unable to create a polygon on the Google Maps API using GPS coordinates inputted from a text field

I am currently developing an interactive map using the Google Maps API. The map includes a floating panel with two input fields where I can enter GPS coordinates. My goal is to create markers and connect them to form a polygon. While I can easily draw lin ...

Using JQuery to dynamically set dropdown option values from a JSON object

I have an HTML code snippet: $.ajax({ type: "POST", url: "hanca/hanca_crud.php", dataType: 'json', data: { id_hanca: id_hanca, type: "detail_hanca" }, //detail_hanca success: function(data) { var teks = ""; $.each( ...

Display two images consecutively within a single img tag

My goal is to display two images using a single <img /> tag. The first small image will be loaded and shown using the src attribute, while the second large image will be contained within the data-src attribute. Only one image will be displayed at a t ...

Incorporating HTML5 transitions into your website

After researching HTML5 transitions and adapting some examples, I finally achieved the desired effect. <!DOCTYPE html> <html> <head> <style> div { width: 50px; height: 50px; } div. ...

Can directives be inserted within the v-html directive?

I am currently working on some web features, but I have encountered a problem. I was trying to create multiple HTML structures that include Vue directives with v-html, but I couldn't figure it out. So, does anyone know how to render Vue directives wit ...

Do the values returned by window.screen.width and height represent CSS pixels or physical screen pixels?

After exploring the API named screen and visiting this documentation link, my initial anticipation was that I would receive information regarding actual screen size pixels. https://developer.mozilla.org/en-US/docs/Web/API/Screen/width https://i.sstatic.n ...

Create an immediate impact by injecting CSS

I currently have the following code set up: style.js: function applyStyle(str) { var element = document.createElement('style'); element.innerHTML = str; document.body.appendChild(element); } var style = 'body {' style ...

Tips for designing resizable overlay divs

Looking to design an image with an overlay gradient and text, similar to this: <div> <img src="url"/> <div background-image="other url" background-repeat:repeat-x;> <h2>some text</h2> </div> </div> Some impor ...