Restricting the line and putting an emphasis on the initial letter

I am attempting to transform the first letter in a text to uppercase and limit it to a maximum of 5 lines.

Check out this fiddle: https://jsfiddle.net/1crvt37n/

.capitalize-first-letter::first-letter {
  text-transform: uppercase;
}

.line-clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>;
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="capitalize-first-letter line-clamp" style="width: 100px">
    This text should start with a capital letter and be limited to only 5 rows...
    This text should start with a capital letter and be limited to only 5 rows...
    This text should start with a capital letter and be limited to only 5 rows...
    This text should start with a capital letter and be limited to only 5 rows...
    This text should start with a capital letter and be limited to only 5 rows...
    This text should start with a capital letter and be limited to only 5 rows...
    </div>
</body>
</html>

In my Firefox browser (Mac, Version: 110.0) it behaves as intended, but in Chrome (110.0.5481.177) it does not. The first letter remains lowercase in Chrome, while the line clamp functions correctly in both browsers.

Is there a way to make it function properly in Chrome?

htmlcss

Answer №1

Your CSS is currently hiding your text, making it invisible. To fix this issue, either remove the class that is causing the text to be hidden or make modifications so the text is visible. Remember that each row of text should have its own div element to ensure proper styling by CSS.

If you have more than 5 rows of text, you can hide the additional rows using the CSS pseudo-class :nth-child(n+6).

div.capitalize-first-letter::first-letter {
  text-transform: capitalize!important;
}

.hide_row_more_than_5 div:nth-child(n+6) {
  display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="hide_row_more_than_5">
      <div class="capitalize-first-letter">
      This text should have a capital letter and only 5 rows...
      </div>
      <div class="capitalize-first-letter">This text should have a capital letter and only 5 rows...
      </div>
      <div class="capitalize-first-letter">This text should have a capital letter and only 5 rows...
      </div>
      <div class="capitalize-first-letter">This text should have a capital letter and only 5 rows...
      </div>
      <div class="capitalize-first-letter">This text should have a capital letter and only 5 rows...
      </div>
      <div class="capitalize-first-letter">This text should have a capital letter and only 5 rows...
      </div>
      <div class="capitalize-first-letter">This text should have a capital letter and only 5 rows...
      </div>
      <div class="capitalize-first-letter">This text should have a capital letter and only 5 rows...
      </div>
    </div>
</body>
</html>

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

Passing the value in a td element to a JavaScript function using Thymeleaf onClick

Trying to utilize "Thymeleaf" for the first time, I am attempting to pass a value to JavaScript with the following code: onclick="getPropId('${properties.id}')" The corresponding function is as follows: getPropId(inputID){alert(inputId);} Unf ...

javascriptjavajqueryhtmlthymeleaf

Adding a translucent overlay on top of a background image within a div, while keeping the text on top

Here is the current code that I am working with: <div class="square"> <div id="wrapper"> <h2>Text</h2> <h3>Text</h3> </div> </div> .square { padding: 10px; width: 150px; height ...

htmlcssimagebackgroundhover

Apply the "selected" class to the menu located in the common header

I have implemented a menu in the header.php file that will be displayed on all pages such as index.php or contact-us.php. However, I am facing an issue with adding the selected class to the active main category in the menu. The code provided works fine wh ...

phpjqueryhtmlcsssubmenu

Ways to apply Position Fixed to a particular Div element and subsequently eliminate that class while scrolling

Check out my current Jsfiddle project here I am working on a task that involves adding a class to a specific div when scrolling and then removing that class. Below is the JavaScript code I have written for this functionality: var targetDiv = $(".mainwra ...

javascriptjquerycssscrollfixed

Can HTML text areas be designed to adjust their width automatically, as well as their height?

Among the numerous StackOverflow examples showcasing an auto-height Textarea, one noteworthy example can be found here: <textarea oninput="auto_grow(this)"></textarea> textarea { resize: none; overflow: hidden; min-heig ...

javascripthtmlcsstextarea

Issue with reactivity not functioning as expected within VueJS loop without clear explanation

Struggling with implementing reactivity in vue.js within a loop? The loop renders fine, but firing an event updates the content without visibly rendering the data on the page. The latest version of vue.js is being used with bootstrap and jquery. Despite a ...

javascripthtmlvue.js

Customize the style attribute in Bootstrap 4 using Popper.js

I've been attempting to adjust the position of a dropdown element, but I'm struggling to make it work. Utilizing Bootstrap 4 with Popper.js, I simply added a default dropdown without any custom styles to my page. However, it automatically applies ...

htmlbootstrap-4popper.js

Uniform Fixed Width for Material UI Table Cells

Below is a Material UI Table with columns set to a fixed size of 205px each, and the table itself set to 100% width. However, when there isn't enough space available, the columns do not shrink according to the text inside them, remaining stuck at 205p ...

javascripthtmlcssreactjsmaterial-ui

Printing without sufficient paper will result in an incomplete printout

https://i.stack.imgur.com/jNlRr.jpg I am facing an issue with printing the last column "Potensi". The text in this column is not fully printed. How can I resolve this problem? I am using PHP. Thank you ...

javascriptcss

What is the best way to combine PHP with HTML in your code?

I am looking to display data from a database in a table format. Additionally, I want to include images sourced from the same database. Using AJAX, I have a function called getPosts that fetches data from getPosts.php and populates a table with it. Althou ...

phpjqueryhtmlmysqlajax

Embrace the D3js Force Layout barrier and dive right in

Currently, I am working on a force layout project. My main objective is to enable the nodes to avoid a particular div element placed in the center without utilizing gravity within the SVG. I have already implemented collision detection and bounding within ...

javascriptcssd3.jssvg

Unable to integrate an if/else statement into the JSON reply

Working with an API to retrieve data and display images from it. I am attempting to implement an if/else statement that will show photos if the search term yields results in the response, and display a message indicating no results if it does not. Curren ...

javascriptjqueryhtmljsonapi

What is the correct method to define the width as a percentage while also maintaining a minimum width in pixels?

My header/navigation bar div features a repeat-x background image. Within this, I have a horizontal navigation that needs to be centered over the background with a specified min-width and normal width. I want the navigation to be 80% of the full width, wi ...

htmlwidthbackground-imagecss

Toggle two elements simultaneously by clicking on one of them - displaying one element while hiding the other

I am facing an issue with toggling the visibility of two divs using a button click event. One div is initially hidden with a display property set to none, while the other div is visible. My goal is to have this behavior toggle on each click event - the fi ...

jqueryhtmlcss

What is the process of validating a string in HTML using regex with the pattern attribute in a text input field

Attempting to validate the following string "B3:D7,0 H3:J7,0 B9:L27,1 B29:L48,2 B50:L56,2" using a pattern, but it is not producing a match. I am unsure of what may be causing the regex string to fail. In my HTML textfield, I have included the p ...

htmlregexforms

Adding HTML attributes to a VueJS table allows for more customization and control

Is it possible to incorporate HTML/Bootstrap elements into a cell in VueJS? <b-table striped show-empty :items="filtered"> <template slot="top-row" slot-scope="{ fields }"> <td v-for="field in fields& ...

htmlvue.jsvuejs2frontendbootstrap-vue

Unable to successfully implement the Bootstrap dropdown feature in my header upon switching pages

Utilizing Ruby on Rails and Bootstrap 5.3 to develop a website for showcasing my projects and information. I have a header file that contains all of the navbar code. Once I visit any link from one of the dropdown options, the dropdown button stops function ...

htmlruby-on-railsbootstrap-5

CSS Hover Effects on Navigation Bar Not Displaying as Expected

I was aiming to make one of my Navbar tabs stand out by having a different appearance compared to the others. However, there seems to be an issue with the text color for this particular tab in the hover state - it works inconsistently across different brow ...

htmlcsstwitter-bootstrap

What could be causing the iPhone to trim the 20px right padding of my website?

Essentially, here's the situation: Browser: Iphone (the issue doesn't occur in Android): My current setup includes: <meta name="viewport" content="user-scalable = yes"> Here is the corresponding CSS: html, body, #wrapper { height: 1 ...

iphonecss

Is there a way to store mathematical equations in a database efficiently?

My website is built in Asp.net and I am utilizing MySql as my database. I have several sample math papers saved in Microsoft Office Word format. What I need is an HTML input tool, such as a textbox or editor, that will allow me to directly copy mathematica ...

htmlasp.netdatabasematheditor