Difficulty with setting a border for text spanning multiple lines

I am trying to style a header text with a border around it. The issue arises when the larger text spans over two lines, causing the border to break in between. In an attempt to fix this, I applied the CSS property box-decoration-break: clone;. However, this results in the text being split into two separate blocks as shown in the attached screenshot. Is there a way to ensure that the border is displayed completely around the text?

The desired outcome should look like this:

This is how the HTML should be structured:

<span class="border-title">
  LOREM IPSUM DUMMY CONTENT LOREM IPSUM DUMMY CONTENT
</span>

The following CSS Style needs to be implemented:

.border-title {
  color: #264755;
  text-transform: uppercase;
  font-size: 24px;
  border: 1px solid #3cadca;
  padding: 10px 20px 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
htmlcsstext

Answer №1

make sure to include the property display: inline-block;

.border-title {
 border: 1px solid blue;
 display: inline-block;
}
<div style="max-width: 300px;"><span class="border-title">LOREM IPSUM DUMMY CONTENT LOREM IPSUM DUMMY CONTENT</span></div>

Answer №2

To avoid using the div max-width as suggested by @buxbeatz, you can simply include display:block; in your CSS and it will work effectively.

.border-title {
    color: #264755;
    text-transform: uppercase;    
    font-size: 24px;
    border: 1px solid #3CADCA;    
    padding: 10px 20px 5px;    
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    display:block;
}
<span class="border-title">LOREM IPSUM DUMMY CONTENT LOREM IPSUM DUMMY CONTENT</span>

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

Problem with the show/hide feature on jQuery. Automatically scrolls to the beginning of the page

On my website, I have successfully implemented two basic Show / Hide links that are working great. Here is the HTML code: <!DOCTYPE html> <html lang="en"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" conte ...

javascriptjqueryhtmlhideshow

What could be causing the issue with my css `content:` not functioning across different browsers, and how can I enhance cross-browser compatibility in all cases

Working on my first HTML/CSS project, I encountered a browser compatibility challenge. The code functions well in Firefox, IE, and Edge but fails in Chrome. Specifically, I am trying to make a button display alternating up and down arrows when clicked. Whi ...

javascripthtmlcsscross-browser

Achieving vertical centering by adjusting padding within the parent container

I've successfully set up a DIV with a height of 200px and an inner div at 150px, leaving me 50px for the image caption. Now I want to vertically center the text within that remaining 50px. .captioned { width: 300px; height: 200px; display: fl ...

htmlcss

The CSS styles do not seem to be taking effect on the Bootstrap

Here's a snippet of code extracted from my website's html and css files. My intention is to make the navbar slightly transparent with centered links, but for some reason, the css styles are not applying correctly to the navbar. HTML <body ...

htmlcssbootstrap-4

In Internet Explorer versions 7 and 8, a transparent overlay div enables click-through functionality

I am facing an issue with a div containing form elements and an invisible overlay mask. When using IE 7 and 8, the click goes through the overlay without background which is incorrect. To solve this problem, I added a background color to the overlay div w ...

jquerycssinternet-explorer-8internet-explorer-7overlay

Show a random number within a Bootstrap tooltip

I am trying to make a bootstrap popover display a random number every time it is clicked, but my current implementation is only showing the initial number generated and does not update on subsequent clicks. Below is my code snippet: <button type=&qu ...

javascripthtmlbootstrap-5popover

Issue with Material UI Menu positioning incorrectly when button is aligned to the right or left

When looking at the first image, it appears that the material-UI menu position is working correctly. However, when we change the button position to align-right, the menu position shifts slightly to the left, not perfectly aligning with the right side as in ...

htmlcssreactjsmaterial-uimaterial-design

Problem with ineffective responsive CSS on mobile devices

Is there anyone who can assist me with this issue? I have set up a CSS grid that works properly above 768px when the min-width is specified. However, as I scale below that threshold, the layout remains unchanged and the media tag doesn't seem to take ...

htmlcss

The checkbox appears to have selected values, yet the selected options are not visibly displayed

UPDATE I have been utilizing this specific file in order to dynamically generate a list of tags using the code provided below. import React from "react"; class TagElement extends React.Component{ updateCheck(e){ var v = (e.target. ...

htmlcssreactjsbootstrap-4

Is there a way to display the next/previous buttons separately from the scroller in my jQuery thumbnail scroller implementation?

Is there a method to display the next and previous buttons outside of the scroller frame when using jQuery thumbnail scroller by manos.malihu.gr? I have attempted to modify the button class in CSS to make them more prominent or visible, but unfortunately ...

javascriptjquerycssscroll

I am unable to incorporate added height into the component

In my current project using react.js, material-ui, and sass, I had the task of creating a ChatBit component. After writing it, here is the code: customComponent.js file. // @flow import * as React from 'react'; import { useState } f ...

javascriptcsssassmaterial-uireactjs

Obtaining an Element using Selenium with a specific label

My goal is to align the texts (answers) beside the radio buttons in order to compare them with the correct answer. Below is the HTML snippet: <tbody> <tr> <td class="middle" width="15"> <input name="multiple_choice_resul ...

htmlselenium-webdriverlabel

Is it possible to manipulate the content inside a div tag using JavaScript in HTML?

What is the most efficient way to dynamically adjust a data offset value within an HTML tag using JavaScript? For example: <div class="box" data-offset="2s"></div> I am looking to update the value within the data-offset attribute based on s ...

javascripthtmlcssmedia-queriesaddition

What is the reason that styled() does not apply styles to the Material-UI <TextField /> component?

I've managed to figure out a solution, but I'm curious about why this code is working: <TextField label='Zip Code' size='small' InputProps={{ style: { borderRadius: '.4rem' }, }} sx={{ width: & ...

cssreactjsmaterial-uistyled-components

Duplicate text content from a mirrored textarea and save to clipboard

I came across some code snippets here that are perfect for a tool I'm currently developing. The codes help in copying the value of the previous textarea to the clipboard, but it doesn't work as expected when dealing with cloned textareas. Any sug ...

javascriptjqueryhtmltextarea

Vanishing essence

http://jsfiddle.net/ddGHz/1004/ //html <div id = "anglereturn"/> <div class="box"></div> //js, jquery var box=$(".box"); var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2]; $(document).mousemove(function ...

jqueryhtmlcss

Issue with the Z-Index property not functioning as expected on unordered lists within a dropdown menu

I have a dropdown menu that opens to the left, but it is displaying underneath the content. I attempted adjusting the z-index of the content to 1 and the dropdown to 2, however, this did not resolve the issue. Here is a sample in jsFiddle: https://jsfiddl ...

javascriptjqueryhtmlcsstwitter-bootstrap

Bootstrap dropdown feature automatically rearranges all items in my navigation bar

I recently set up a navbar for my website, but I'm struggling to grasp the concept of positioning items with Bootstrap. One issue I encountered is that when I click on the dropdown button (profile image), it causes all the items in my navbar to shift, ...

htmlcssbootstrap-4

The subpage on Github Pages is failing to load despite the correct URL being entered

While working on a multipage website using React and hosting it on Github pages, I encountered an issue. The website functions perfectly on localhost, but encounters errors when accessing a subpage on Github pages. Upon clicking the subpage link, Github p ...

htmlreactjsreact-routergithub-pages

How can I showcase API information on a website with the help of Node.js?

Hello everyone, I'm a beginner at creating websites and I am eager to explore nodejs. Currently, I am utilizing an API to retrieve data in node: request(options, function (error, response, body) { if (error) throw new Error(error); console.log(b ...

node.jsapihtml