Slice the towering text in half lengthwise

Ensure that the last line of visible text fits within a 20px padding, or else it should be completely cut off.

The challenge lies in the varying text lengths of h3 each time. It's difficult to predict how much needs to be trimmed.

Currently, the text does not respect the padding and sticks closely to the bottom.

How can I resolve this issue? The box must maintain a height of 100px.

.box {
height: 50px;
width: 100px;
background: antiquewhite;
overflow: hidden;
padding: 20px;}

h3 { margin: 0;}

<div class="box"><h3>Various</h3>Loremipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>

Answer №1

To create a visually appealing layout, you can insert an empty DIV within the parent container with absolute positioning. This inner DIV should align to the bottom and match the background color of the parent:

.container {
  position: relative;
  height: 50px;
  width: 100px;
  background: antiquewhite;
  overflow: hidden;
  padding: 20px;
}

.child {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: antiquewhite;
}
<div class="container"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  <div class="child"></div>
</div>

Make sure to adjust the height of the child div accordingly and ensure that the parent container has position: relative set in its styles.

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

"Enhance Your Design with Hovering CSS Backgrounds

Seeking assistance with changing the background image on span hover. If anyone can assist, I have included the complete code for the website below. Take a look at the full website code here: Pastebin CSS Pastebin JavaScript ...

Having Difficulty Formatting HTML Input in Next.js

I'm encountering difficulties when trying to style HTML form elements in Next.js. I've been unsuccessful in applying CSS using a simple class name from the imported stylesheet, but have managed to achieve some success with inline styling by using ...

Creating a JavaFX label with a border radius of 20

I need help with creating rounded edges for two labels in my interface. I want the first label (Hello) to have rounded edges on the top left and top right, and the dummy label to have rounded edges on the bottom right and bottom left. I've attempted ...

Modify the standard placement of choices in MUI

Currently, my UI is powered by MUI. I have various options displayed in the image below: Everything looks good so far. However, I wish to reposition the options container further down. (It is currently set at top: 64px which is the default). I aim ...

Incorporate a variable into a CSS class

Currently, I am working on developing a component that creates an animation loop with a duration that is passed as a prop to the component. The issue I am facing involves using CSS to create the animation: animate:{ -webkit-transition: 10.0s !important ...

Prevent parent from scrolling when hovering over a div in HTML5

Unfortunately, the scrolling attribute is not supported in HTML5. I'm facing an issue where I have an svg inside an iframe within a div, and I need to enable scroll functionality within the div while preventing the page from scrolling at the same time ...

Assign a background image to a master page utilized in subdirectories

In my website's root directory, I have a master page. Inside this root directory, there is a folder named Images which contains the background image for my master page. When I apply this master page to web pages located in the root directory, everythi ...

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

Activate the trigger event when the popover is activated remotely

I am facing a unique situation on my website where I have multiple popovers (pop1), (pop2), (pop3) that are triggered in sequence when the "Next" button is clicked. These popovers appear one after the other without direct access to them individually. If y ...

The Ajax contact form is not submitting the necessary POST data to the PHP script

After creating an html form with ajax: function confirmSendMail() { $(".send_contact").click(function(event){ event.preventDefault(); var name = $("#inputName").val(); var email = $("#inputEmail").val(); var pho ...

What is the best way to get rid of a connect-flash notification?

I'm having trouble removing the message (with the username displayed) after logging out by pressing the logout button. Every time I try to press the logout button, it just refreshes the page without any action. I want to stay on the same page and not ...

How do I view a wildcard in my ID selector using jQuery?

When I want to initially hide various content scattered around the page, I usually use the following jQuery code: $('#objective_details, #time_estimate_details, #team_members_details, #resources_details').hide(); Is there a method to utilize a ...

What are the steps for implementing a two-column layout in reveal.js?

When creating my slides using reveal.js, I write them in Markdown code. I am now looking to present my content (text, bulleted lists, or images) in a traditional two-column text layout. While I am open to a more complex initial setup, I want to ensure that ...

How to properly display an Angular Template expression in an Angular HTML Component Template without any issues?

When writing documentation within an Angular App, is there a way to prevent code from executing and instead display it as regular text? {{ date | date :'short'}} Many sources suggest using a span element to achieve this: <span class="pun"&g ...

Display an image tag using the site_url() function within PHP brackets

I have a loop in my view that is fetching all the data from the database: <?php foreach($content as $contentRow): ?> <?php echo $contentRow->value; ?> <?php endforeach; ?> This loop works well for HTML strings ...

Steps for executing a function when a directory is clicked

Currently, I am working on creating a file browser and facing some issues with calling a function when the user clicks on a directory. Initially, I tried using onClick inside an href in the class part (right before FUNCTION folderSize), intending to open ...

a non-breaking space within a hyperlink

While working on the subnavigation of a website, I encountered an issue with the link Suite «Mont Blanc», which was pulled from the backend. The desired format for this link was:       Suite «Mont Blanc» However, t ...

I've recently delved into the world of JavaScript and am currently working on creating a calculator website. However, I'm facing some challenges in getting it to function

I created a calculator code using HTML, CSS, and JavaScript for a website. However, due to my limited experience with JavaScript coding, I encountered some issues. Currently, I have only implemented the number input part (not operations or deletion), but w ...

Why aren't NavBar Image Links Functional, even though the code seems flawless? What could be the issue?

Looking at the current HTML code snippet I have within the <head> section, it includes: <ul class="nav"> <li> <a href="http://www.greg-holmes.com/#/title" target="_blank"> <img src="img/home.png"> ...

What could be the reason for the malfunctioning transition effect in my slider animation?

Having trouble getting my slider animation to work. I've tried different CSS styles but the slide transition is not functioning as expected. When one of the buttons is clicked, I want the slide to change from right to left or left to right. Can anyone ...