Limit the text within a div to just two lines

I am facing an issue with the text size displayed in the image attached.

Initially, the text is not styled with CSS.

https://i.sstatic.net/00BmI.png

To meet a requirement limiting the text to two lines only, I have implemented the following CSS code:

{ 
    display: -webkit-box;
    margin: 0 auto;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space : normal;
    width : 100%;
}
After applying the above CSS

https://i.sstatic.net/8GhJQ.png

However, the client has requested the output to look like this:

Expecting ..

https://i.sstatic.net/vObnW.png

If anyone could provide assistance on this matter, it would be greatly appreciated.

javascripthtmlcss

Answer №1

Your code appears to be correct. Be sure to specify the desired width.

{  
 display:-webkit-box;
 -webkit-line-clamp:3;
 -webkit-box-orient:vertical;  
 overflow: hidden;
 width: 160px;
}

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

Run the script within the Angular scope

Hey there! I'm having an issue passing a JavaScript code through Angular scope, but when it renders on the view page, it's displayed as text. I even attempted using ng-Sanitize, but unfortunately, that didn't solve the problem. <div ...

javascriptjqueryangularjs

Tips for implementing HTML5 events on a widget

After testing out this specific drag and drop feature from W3Schools, I am facing a challenge where I need to drag one widget onto another widget, which are both siblings. To enable dragging on my element, I have added the draggable attribute like so: &l ...

javascripthtmldojo

There seems to be an issue with the accurate calculation of the screen width while utilizing the scrollbar-gutter

Please take note: The scrollbar-gutter: stable; property is not compatible with Safari. Additionally, the issue seems to be specific to Chrome and works fine in Firefox. I have observed some unusual behavior when attempting to position elements fixed to t ...

javascripthtmlcss

Presence detected: Discord bot appears online but is missing from members list

I am embarking on the journey of creating my first Discord bot. After installing NodeJS on my computer, I used the Discord developer tools to create the app, turned it into a bot, obtained the token, selected privileges, and added the bot to my server. I ...

javascriptnode.jsdiscordbots

pulsate feature doesn't appear to be functioning properly on every div

Just a quick question - I seem to be having some trouble with my div pulsating when clicked. Ideally, I would like them to pulse individually. Check out this JSFiddle link for reference. <script> $(document).ready(function() { $("#toggle").click ...

jqueryhtml

Using JavaScript, iterate over an array to generate input fields and assign values, with the last item in the array pop

I'm working with a div containing the id "inputs" in my HTML file, along with the following JavaScript code: let countries = [ {country: "Honduras", script: `<script src="crazy dog eats drool"> 'cha cha'` }, {country: "Chile", ...

javascripthtml

Unusual trait of TrackballControls.target within the world of Three.js

My current project involves simulating a 3D distribution of galaxies. In this simulation, the galaxies are represented as points. question1.htm references galaxydata1.txt to calculate and load the galaxy positions: rawFile.open("GET", "galaxydata1.txt", ...

javascriptthree.jscontrolstrackball

Ways to implement shader on a THREE.Object3D that has been loaded using OBJMTLLoader

After loading a model with THREE.OBJMTLLoader, I want to add a vertex and fragment shader to it. var loader = new THREE.OBJMTLLoader(); loader.addEventListener('load', function(event) { var mesh = event.content; scene.add(mesh); }); load ...

javascriptthree.jswebglshader

What is the best way to create multi-step selectors on an HTML webpage?

I am struggling with creating an HTML contact form that involves element dependencies. The schema includes various selectors and inputs that depend on previous selections. How can I implement this logic in HTML and JavaScript (jQuery)? I need to generate ...

javascriptjqueryhtmlcontact-form

Utilizing jQuery to apply a class and then continuously switch it on various elements

Here is a set of list elements: <ul> <li class="first"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li>&l ...

javascriptjqueryhtml

Create a resizable textarea within a flexbox container that allows for scrolling

Hey there! I'm struggling with a Flexbox Container that has three children. The first child contains a textarea, but it's overflowing beyond its parent element. Additionally, I want to make the content within child 2 and 3 scrollable. I've ...

css

PHP regular expression /only match 10 whole digits/;

Currently, I am working on updating a PHP script that contains the following code snippet: function CheckNumber(MyNumber) { var MN = /^\d{10}$/; if (MN.test(MyNumber)) { return true; } return false; } The current script enfor ...

javascriptregex

Is there a button that doesn't trigger a postback action?

I encountered an issue on my asp.net page where a button triggers a JavaScript function, but after the script runs, the page reloads (postback). How can I prevent this from happening? <button onclick="printElement('content');">Print</bu ...

javascriptasp.nethtml

Select either one checkbox out of two available options

My form includes two checkboxes, allowing users to click on both of them. I'm wondering if it's possible to set it up so that only one checkbox can be selected at a time. For example, clicking on the first checkbox would turn it on while turning ...

javascripthtmljquerycss

Positioning text too far to the left causes it to become disorganized and difficult

I am looking to achieve the following result: LEFT THING, not fixed here comes a text that spans 100% width of this "column" width (content itself but my issue is that when it gets too long, this column drops below determines that) the left ...

htmlcss

Why is it not functioning when storing responses in a jQuery variable?

I am working on a survey where each question is displayed one at a time. Users click on their answers, causing the current question to fade out and the next one to fade in. At the end of the survey, I want to show all the answers they selected. Below is t ...

javascriptjqueryhtml

Center a span vertically inside a div as the text within the span grows to occupy the entire div

I am facing an issue with a table that has 25 td's. Each td contains specific elements as shown below: <td> <div> <span> text </span> </div> </td> Additionally, there is a script in place that adj ...

javascriptjquerycss

Accordion Element using HTML and CSS

Seeking assistance with a website project! I am in need of help in implementing the following feature: I would like the "About" link to expand into a panel when clicked, and retract back when the user clicks "hide" within the panel. Check out the attached ...

htmlcss

The function to refresh content is causing errors in the code

Creating a comment and replies form where the replies display underneath each comment. I've encountered an issue where I can post replies normally, but when attempting to delete a reply, I must refresh the page. After refreshing, I'm only able to ...

javascriptjqueryajax

Receiving null value with Web API POST using [FromBody]

Below is the code for my WebAPI in C#: [Route("")] [HttpPost] public void SaveTestRun([FromBody] object data) { inputResultsToDatabase(data); } This is the ajax request I am making: sendTestData() { t ...

javascriptc#jsonajaxasp.net-web-api