Display only the text from the initial two rows

Hello everyone! I need help with the code provided in this link.

My question is: How can I display only the first two rows?

I have attempted the following:

    .wrapper {
           border: 1px solid blue;
           width: 608px;
          }
    .text {
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
          }

    <div class="wrapper">
      <div class="text">
        Since the introduction of inkjet printing is in the latter half of the
        1980s, inkjet printers have grown in popularity and performance while
        dropping significantly in price. Since the introduction of inkjet
        printing is in the latter half of the 1980s, inkjet printers have grown
        in popularity and performance while dropping significantly in price.
      </div>
    </div>

However, it only displays the first row, whereas I require only the first two rows to be displayed.

Answer №1

Could you please review the code snippet below? It should solve your issue by simply adding the line-clamp property to the .text class.

For reference, you can visit: https://jsfiddle.net/yudizsolutions/1bvunLzf/1/

.wrapper {
  border: 1px solid blue;
  width: 608px;
}

.text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
<div class="wrapper">
  <div class="text">
    Since the introduction of inkjet printing is in the latter half of the
    1980s, inkjet printers have grown in popularity and performance while
    dropping significantly in price. Since the introduction of inkjet
    printing is in the latter half of the 1980s, inkjet printers have grown
    in popularity and performance while dropping significantly in price.
  </div>
</div>

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

Flask url_for usage done wrong

Running a flask server serves HTML pages with scripts stored in the static folder. An example script included in the header is: <script src="{{url_for('static', filename='js/viewer.js')}}"></script> The GET reques ...

The div in Bootstrap is not becoming scrollable despite using "overflow: auto"

I have a unique setup with two divs nested inside another div. The first div contains a table, while the second div holds buttons. I'm trying to make the table div scrollable by using overflow-auto, but it's not working as expected. I suspect tha ...

Cannot close the Bootstrap dropdown after selecting an option

I am encountering an issue with a dropdown list that has a select feature using Bootstrap 3.4.1. The problem is that the dropdown remains open after selection and does not close unless I click outside of the list. Here is the HTML code: <div id="c ...

What is the best way to delete a container when its child element includes a specific string?

I run a website that compiles video clips from various sources, including YouTube. Occasionally, some clips appear as private videos. I am looking to use jQuery to apply the display:none; property to the entire div when the class a.colorbox.cboxElement con ...

Go to the identical page with a message embedded in it

Creating a login page using JSP involves an index.jsp file which contains the form and javascript scriplets. The connectivity to an Oracle database and validation of username and password are handled in check1.jsp. The problem arises after entering the us ...

When using <p-button> without a label, it displays an invisible <span> with the ui-button-text style, effectively overlapping other text on

I am facing an issue with the code on my website: <p-button (onClick)="deleteFile(attachment,user_agreement)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button> <a href="{{attachment.filePath}}" target="_blank">{ ...

"Efficiently incorporating a responsive sprite background image on your website -

Hey there! I am dealing with a situation where I have two columns of content in a container. The first column contains text, and the second column is a span with a background sprite image. The issue arises when the screen resolution gets smaller - I want ...

Scroll snapping at the end of the viewport just before reaching the final section of the page

I am curious about CSS snapping points (reference, browser support). My aim is to create a scrolling experience where the viewport snaps to specific points when reaching certain sections. The goal is for smooth scrolling until the second last section, then ...

The RGB values of a dynamically loaded image being drawn to a canvas in JavaScript are slightly off

After hosting some .PNG images on my NGINX webserver, I noticed a discrepancy in the RGB values when loading and drawing them on a canvas using context.drawImage(img, 0, 0); and retrieving the image data using context.getImageData(x, y, 1, 1).data. Interes ...

Issues with inline display not being rendered properly in HTML/CSS

I've been attempting to place an image and an h1 element on the same line. After researching online, I attempted using display:inline; for both the parent div element as well as each individual element. This is my current code: <div style="displa ...

Tips for adjusting the color of a single ion-item within an ion-list after being clicked

I've been struggling to find a solution for this issue. I have an ion-list with several ion-items generated from an array using *ngFor. My goal is to change the color of only the clicked item, but so far, all items are changing color on click. Here&a ...

iframe: retrieve current iframe

Currently, I'm working on a page that contains multiple iframes. Only one iframe is active at a time, and I need to be able to determine which one is currently active. I attempted using document.activeElement.id, but it only returns the correct resul ...

Enhance the input field with letter control

Here is a snippet of my HTML code for inputs: <form class="form" id="firstForm" novalidate="novalidate"> <div class="tab-content"> <div class="tab-pane active" id="vtab1"> <div class="form-group" ...

Recursive instruction malfunctioning

I'm currently trying to develop a custom recursion directive, but unfortunately it's not functioning as expected. I have followed the instructions outlined here: Recursion in Angular directives For reference, you can view the fiddle here: http ...

Exploring Java Selenium Capabilities

<div id="my_menu" class="sdmenu" style="float: right"> <div class="collapsed"> <span>Research and Retrieval System</span> Is there a way to select Research and Retrieval System using Selenium? ...

Angular application experiencing issues with fixed headers not scrolling correctly

I've been working on implementing a fixed header for one of my pages in an Angular application, but I'm having some trouble getting it to work as expected. Currently, when the user expands the accordions on the page and scrolls down, the headers ...

Is it permissible to utilize multiple ":root" selectors in a CSS file?

One of the features in TWBS 4 is the presence of color variables within the :root selector in bootstrap.css. Is it possible for my child stylesheet to also include a :root selector, allowing me to define my own variables? I assume that :root {} can be ov ...

Reduce the file size of CSS and JS files for Magento

We are facing an issue with minifying CSS and Javascript for our Magento website. Currently, the size of our website is 1.1 MB and we aim to reduce it to 1 MB or even lower if possible. I tried using the "CSS Settings" and "Javascript Settings" functions ...

"Applying CSS styles to expand the size of

Is there a way to prevent the blue div from overflowing the red div, but still always fill its parent container? I searched on stackoverflow and found suggestions to use height: 100%, but this causes issues when the child element has padding. How can this ...

Set the DIV element to match the height of its container

I'm currently using this HTML code, and it's functioning correctly. However, I would like the height of the div to adjust dynamically based on the tab's content, rather than specifying a fixed height of 200px. Using a percentage value for th ...