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

Tips for formatting JSON using jQuery

Imagine my JSON data with 3 different sets of information: [ { "Pair":"", "Id":"8ca2df56-2523-4bc3-a648-61ec4debcaaf", "PubDate":"/Date(1463775846000)/", "Provider":null, "Market":"" }, { "Pair":"", ...

javascriptjqueryhtmlcssjson

Scroll horizontally within each row

I am attempting to create a table with individual horizontal scrolling for each row, dynamically. Currently, my code only allows the entire table to scroll horizontally, not the individual rows. <table class="table-mainprojects"> <tr> < ...

phphtmlcss

The Javascript function is triggered only upon the second click

My goal is to retrieve prescription details for a specific patient, with the results displayed in a modal window. However, I am encountering an issue where the first result is only obtained on the second click. Subsequent clicks display the results of the ...

javascriptjqueryhtml

Is it true that nested CSS IDs function correctly in Firefox, but not in IE8?

My HTML is structured like this: <div id="content"> <div id="asection"> <h1>Some Text</h1> </div> </div> The CSS properties I'm using are as follows: h1 { color:#873C62; font-size:32px; line-heigh ...

htmlcssinternet-explorer-8internet-explorer-7

Display issue with positioning user name in navbar on Internet Explorer

The user name appears correctly in the navbar on Firefox and Chrome, but in IE it drops down due to a break tag issue. Is there a way to resolve this in IE so that it displays like in Firefox and Chrome? body { padding-top: 102px; background-colo ...

jqueryhtmlcsstwitter-bootstrap

It is not possible to dynamically change the value of a checkbox using jQuery when it is checked or

When the checkbox value is changed to 1, it cannot be changed back to 0 when unchecked. $('.ChkBox').change(function() { if ($(this).attr('checked')) { $(this).val('1'); } else { $(this).val('0'); } ...

jqueryhtml

What is preventing jQuery 3 from recognizing the '#' symbol in an attribute selector?

After updating my application to jQuery 3, I encountered an issue during testing. Everything seemed to be working fine until I reached a section of my code that used a '#' symbol in a selector. The jQuery snippet causing the problem looks like th ...

javascriptjqueryhtmldomjquery-selectors

Is there a way to use a Google Chrome command line switch to simulate the dimensions of a

Seeking information on the available Google Chrome command line switches for emulating device sizes. Specifically, I need to test a component that utilizes CSS @media queries for min-device-width/min-device-height. Previous attempts with --window-size an ...

cssgoogle-chromeselenium-webdriverselenium-chromedriver

Can a Textmate snippet be activated using a Regex pattern instead of just a specific character?

Hey there, I've been spending a lot of time working with CSS recently, and I have to admit that constantly typing "px" after every width, height, margin, etc., is starting to get on my nerves. I find myself refining pixel values in Firebug quite ofte ...

cssregextextmatetextmatebundles

Toggle the slide when you hit submit

I'm considering the functionality of my code. I am interested in creating a slide toggle effect on a div or span when hovering over an input submit button. Here is an example: https://i.sstatic.net/pBSK8.png What is the best approach to achieve thi ...

jqueryhtmlcss

Slide the next section over the current section using full-page JavaScript

I'm currently developing a website utilizing the FullPage.JS script found at this link . My goal is to have the next section slide over the previous one, similar to what is demonstrated in this example. I've attempted setting the position to fix ...

javascriptjqueryhtmlcssfullpage.js

What are the steps to create two frames using Twitter Bootstrap?

I'm just starting to work with Twitter Bootstrap and I need some help. Can someone assist me in creating a two-column layout inside the HTML, where the menu in the header stays visible even when scrolled down? I've included my HTML code below. Th ...

javascriptjqueryhtmlcsstwitter-bootstrap

jQuery failing to append code after being removed

I need some assistance with an issue I've run into while using jQuery's .remove(). Here is a snippet of code that showcases the problem: $( '.video-button span.glyphicon-play' ).click(function() { $( '#video-player' ).ap ...

javascriptjqueryhtmltwitter-bootstrapdom

Design an interactive div element that allows users to modify its content, by placing a span

Here is an example of the desired effect: ICON LINE - 1 This is some sample text inside a div element and the next line should begin here ICON LINE - 2 This is some sample text inside a div element a ...

javascripthtmlcss

When viewing a webpage on a small browser, the content will automatically expand to fill the

Attempting to utilize responsive CSS media queries to hide the sidebar unless the screen is large or a tablet big enough in landscape mode. It appears to be functioning properly while resizing the browser, but at a certain size, it occupies the entire scre ...

cssresponsive-design

I am interested in creating a table that can toggle between show/hide mode with a plus/minus feature

$(document).ready(function() { $("#t1").hide(); // hide table by default $("#close").hide(); //hide the minus button as well if you only want one button to display at a time $('#sp1').on('click', function() { //when p ...

javascripthtmlcssbootstrap-4

arrange objects into an array depending on punctuation marks

Currently, I am in the process of developing a method to retrieve data from my MySQL database and present it as an array. However, the issue I am facing is that only one string of data is accessible at a time, with each instance separated by a comma. For e ...

phphtmlmysql

Having trouble configuring the sticky-footer correctly

Currently enrolled in a web development course on Udemy, I am facing an issue with the footer on my webpage. Even after setting its CSS position to relative, the footer overlaps the content when more data is added. However, removing this positioning causes ...

javascripthtmlcssejssticky-footer

What is the proper placement for index.html <head/> class helper functions within a ReactJS Component?

My custom helper functions are stored in a JavaScript file called classie.js: ( function( window ) { 'use strict'; function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } var hasClass, ...

javascripthtmlwebpackreactjs

Incorporate extra padding for raised text on canvas

I have a project in progress where I am working on implementing live text engraving on a bracelet using a canvas overlay. Here is the link to my code snippet: var first = true; startIt(); function startIt() { const canvasDiv = document.getElement ...

javascripthtmlcsscanvas