Dealing with h2 text overflowing within a bordered container

I need help creating an h2 element with a double border. Here is my current HTML+CSS snippet:

h2.titulo {
  width: 100%;
  margin: 10px 0;
  padding: 10px 0;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 30px;
  display: block;
  color: #8c2638;
  border-bottom: 1px solid #ccc;
  font-size: 25px;
}

h2.titulo span {
  padding: 11px 0;
  font-size: 19px;
  font-size: 25px;
  border-bottom: 1px solid #8c2638;
}
<h2 class="titulo"><span>My title</span></h2>

I want the title to be responsive, and when it's too long I'd like to use text-overflow: ellipsis with overflow:hidden. However, applying overflow hidden on h2 makes the red border disappear:

h2.titulo {
  width: 100%;
  margin: 10px 0;
  padding: 10px 0;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 30px;
  display: block;
  color: #8c2638;
  border-bottom: 1px solid #ccc;
  font-size: 25px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

h2.titulo span {
  padding: 11px 0;
  font-size: 19px;
  font-size: 25px;
  border-bottom: 1px solid #8c2638;
}
<h2 class="titulo"><span>A very very very very very very very very long long title</span></h2>

The closest solution I found still doesn't align the red border exactly with the other border:

h2.titulo {
  border-bottom: 1px solid #ccc;
  font-size: 25px;
  width: 100%;
  margin: 10px 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 30px;
  display: block;
  color: #8c2638;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

h2.titulo span {
  display: inline-block;
  line-height: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid #8c2638;
}
<h2 class="titulo"><span>Normal title</span></h2>

The trick of using margin-bottom:-1px; on span didn't work because of the overflow issue. Any suggestions please?

htmlcss

Answer №1

To achieve the desired effect, make sure to add display: inline-block to your span and remove the bottom-padding from h2.

The reason why margin-bottom:-1px is not taking effect is because span is an inline element by default, which does not have a visual impact like padding or margin

Check out the code snippet below for reference:

h2.titulo {
  width: 100%;
  margin: 10px 0;
  padding: 10px 0 0;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 30px;
  display: block;
  color: #8c2638;
  border-bottom: 1px solid #ccc;
  font-size: 25px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

h2.titulo span {
  padding: 11px 0;
  font-size: 19px;
  font-size: 25px;
  border-bottom: 1px solid #8c2638;
  display: inline-block;
}
<h2 class="titulo"><span>A very very very very very very very very long long title</span></h2>

<h2 class="titulo"><span>NORMAL TITLE</span></h2>

Update: For collapsed borders, consider using box-shadow instead of border

Modified code snippet emphasizing this update:

h2.titulo {
  width: 100%;
  margin: 10px 0;
  padding: 10px 0 0;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 30px;
  display: block;
  color: #8c2638;
  box-shadow: 0px -1px 0px 0px #ccc inset;
  font-size: 25px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

h2.titulo span {
  padding: 11px 0;
  font-size: 19px;
  font-size: 25px;
  box-shadow: 0px -1px 0px 0px #8c2638 inset;
  display: inline-block;
  position: relative;
}
<h2 class="titulo"><span>A very very very very very very very very long long title</span></h2>

<h2 class="titulo"><span>NORMAL TITLE</span></h2>

Answer №2

Have you considered using the ::after or ::before pseudo-elements to include an additional border?

I believe this would create an extra border for the "h2" heading element

Answer №3

To achieve the desired effect, consider nesting the div within a pair of outer divs. This way, the divs will inherit the default height and full width properties. You can then set the second div to display as inline-block in order for the border to be applied correctly.

div.titleBox{
 border-bottom: 1px solid #ccc;
}
div.border{
  border-bottom: 1px solid #8c2638;
  display: inline-block;
}
h2.titulo {
    width: 100%;
    margin: 10px 0;
    padding: 10px 0;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 30px;
    display: block;
    color: #8c2638;
    font-size: 25px;
}

h2.titulo span {
    padding: 11px 0;
    font-size: 19px;
    font-size: 25px;
    word-break: break-all;
}
<div class="titleBox"><div class="border"><h2 class="titulo"><span>This is a short title</span></h2></div></div>


<div class="titleBox"><div class="border"><h2 class="titulo"><span>This is a very very very very very vbery very large one!</span></h2></div></div>

Using an H2 element, which defaults to a block display, may complicate the styling process.

h2.titulo {
    width: 100%;
    margin: 10px 0;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 30px;
    display: block;
    color: #8c2638;
    font-size: 25px;
    border-bottom: 1px solid #ccc;
}

h2.titulo span {
    padding: 11px 0;
    font-size: 19px;
    font-size: 25px;
    word-break: break-all;
    border-bottom: 1px solid #8c2638;
    display: inline-block;
    margin: -1px;
}
<h2 class="titulo"><span>This is a short title</span></h2>


<h2 class="titulo"><span>This is a very very very very very vbery very large one!</span></h2>

To address this issue, try removing the padding from the h2 element and setting the span to display as inline-block.

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

Save an HTML5 canvas element as a picture using JavaScript and specify the file extension

Is there a way to save an Html5 canvas element as an image file using Javascript? I've tried using the CanvasToImage library, but it doesn't seem to work for this purpose. You can view my current code on JsFiddle. <div id="canvas_container" ...

javascriptjqueryhtmlcanvas

Discover captivating visuals that effortlessly occupy the entire breadth, while gracefully encompassing a mere quarter of the total vertical space on the

It's become quite challenging for me to locate images that can occupy the entire width of a page while maintaining just 25% of the page height. Whenever I make adjustments to the image's CSS, it ends up appearing distorted because its width is di ...

cssimage

The window.load() function seems to be malfunctioning as the event is not being triggered. There are no error

I'm struggling with getting the window.load() event to trigger on this specific website. The issue arose last night and despite there being no visible js or php errors, pinpointing the root cause has proven to be quite challenging. In syrp.home.main ...

javascriptjqueryhtml

How can I delete a video on mobile in WordPress?

Looking for some assistance with my webshop www.spidercatcher.dk. I'm trying to have a background video display only on PCs, while showing a still photo on phones and tablets. I've tried using a poster tag but I can't seem to scale it proper ...

htmlcsswordpresswoocommerce

Interactive HTML/CSS Periodic Table with Dynamic Design

Recently, I have been immersing myself in learning about responsive design in HTML/CSS and decided to challenge myself by coding the periodic table of elements using HTML/CSS to hone my skills. While I have set up the basic structure of the table with div ...

htmlcss

conceal the offspring from the guardians, not the offspring

Could you please assist me with this situation... <li id="4331">Region <ul> <li id="4332">Asia</li> <li id="6621">Europe</li> </ul> </li> I have a query when I click on the Reg ...

jquerycssajax

Creating a text shadow effect with text that has a transparent color

I am attempting to replicate the design shown below using the CSS text-shadow property, but I keep getting a solid color outcome. I have tried using an rgba value of 255,0,0,0.0 for the font-color and text-shadow like this: text-shadow: -1px -1px 0 #0 ...

css

What is the method for accessing a selector within a foreach loop?

Whenever a user clicks on a date in the jquery datepicker, two ajax calls are triggered. The goal is for the second ajax call to populate the response/data into a paragraph with the class spots within the first ajax call, displaying available spots for th ...

javascriptjqueryhtmlajax

Can CSS stylesheets be set up to automatically load based on the browser being used to access the website?

I am inquiring because I recently completed a beautiful homepage design and, after viewing the website on Chrome and Safari on OSX, I noticed that certain elements were broken when I opened it in Firefox. In addition, an issue I was experiencing with the ...

csshtmlcross-browserstylesheet

The Android smartphone is experiencing issues with the responsive design not aligning properly on the

I'm encountering difficulties with creating a Viewport that functions properly on an android smartphone. My website is fully responsive, scaling down to 480 pixels wide. At this point, a min-width of 480px is set on the body tag. Initially, my viewp ...

javascriptandroidhtmlviewportmeta-tags

Upon returning to the previous page, the checkbox remains checked and cannot be unchecked

Here is the code I'm using to append checkbox values with a hash in the URL. However, when navigating back, the checkboxes remain checked. Take a look at the code snippet below: <html> <head> <script src="http://ajax.googleapis.com/aja ...

javascriptphpjqueryhtmlcheckbox

Aurelia validator fails to refresh user interface

Despite the aurelia-validator plugin working correctly for form submission and validation, with all properties updating properly, the UI does not reflect any changes. There is no red outline around incorrect properties or error messages displayed. I have r ...

javascripthtmlvalidationaurelia

Transmit information using $broadcast when a button is clicked, and retrieve that information using $scope.$on

I am trying to create a function that will broadcast data from the server upon button click, and then navigate to a new route using $state.go('new-route'). In the controller of this new state, I want to retrieve the transmitted data. However, whe ...

javascripthtmlangularjseventsangular-ui-router

Tips for properly sizing 13 images in Next.js

I've been facing some challenges while working on a responsive website, particularly with getting the sizing right. When viewing my image on mobile, everything looks good: However, when I switch over to desktop view, the image appears too large. He ...

htmlcssnext.jsresponsive-design

Can CSS be used to communicate to JavaScript which media queries are currently in effect?

Is there a way for Javascript to detect when a specific CSS media query is active without repeating the conditions of the media query in Javascript? Perhaps something similar to an HTML data attribute, but for CSS. For example: CSS @media (min-width: 94 ...

javascriptcssmedia-queries

Why isn't this code for hiding the animation and displaying it not functioning properly?

Why isn't this animation from display none to block working properly? The initial code appears as follows, and it functions correctly: $(".box_outer").stop().animate({top: '25px' , opacity: 1}, 100); When I add display: none; to the class ...

javascriptjquerycssanimation

Tips for creating multiple functions within a single JavaScript function

Is there a way to combine these two similar functions into one in order to compress the JavaScript code? They both serve the same purpose but target different CSS classes. The goal is to highlight different images when hovering over specific list items - ...

javascriptjquerycsssyntax

What steps can I take to fix the Error with webpack's style hot loader JavaScript?

Just starting out with native script and encountered an issue when running this code: <template> <view class="container"> <text class="text-color-primary">My Vue Native Apps</text> </view> </template> &l ...

javascriptcssvue.jsnativescriptnativescript-vue

Design and execution of webpage structure

My website features a single-page layout with fixed navigation that allows users to easily navigate up and down the page using #. However, when the page loads I want it to display the second section of content instead of the top section. Is there a way to ...

jqueryhtmlanchor

Having trouble setting the focus on a text box following a custom popup

Presenting a stylish message box and attempting to focus on a textbox afterward, however, it's not functioning as expected. Below is the HTML code: <a class="fancyTrigger" href="#TheFancybox"></a> <hr> <div id="TheFancybox">& ...

javascriptjqueryhtmlfancybox