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

Dynamic Height in React Material-UI Table with Sticky Headers and Multiple Rows

Currently, I am working with React and Material-UI to create a table that needs to have a sticky header for a multi-row table head. The challenge I'm facing is that I don't want to specify a fixed height for the table, but instead have all lines ...

htmlcssreactjsmaterial-ui

When I adjust the size of my browser, the elements on my HTML page shift around

I'm facing an issue where all my elements move when I resize my browser, and I cannot figure out why. How can I ensure that they stay in their respective positions even when the browser is resized? Is there a CSS solution for this? Thank you! body ...

htmlcss

How can I trigger a PHP function from within an HTML onClick() event?

While I have come across a response on stackoverflow regarding form submission, my query pertains to a different implementation. I am in need of calling a function that registers a variable in $_SESSION[], and then redirects to another page (html/php). I ...

phpjavascripthtml

Bootstrap: Altering grid column layout for medium and small/extra-small screens

Hello everyone, I'm having a bit of trouble working with Bootstrap. My goal is to create a container with a row that contains three columns of equal width: <div class="row"> <div class="col-md-4" style="background:red;">logo</div& ...

htmlcssbootstrap-4

Tips for centering a div horizontally when it exceeds the width of a mobile screen

My challenge is to create a circular div element that is wider than the mobile screen and perfectly centered. This circular div needs to be an exact circle, specifically targeted for mobile screens. I've attempted to achieve this using the code in th ...

javascripthtmlcss

Because of the CSS tree structure, it is not possible to add or remove classes. This restriction applies to all actions done in jQuery, including click

I want to create a hover effect where the CSS changes when hovering over an item, then reverts back to normal when no longer hovered. Additionally, I would like the CSS to change when the item is selected, and return to normal when another item in the same ...

javascriptjquerycss

Issue with Jquery .on() causing toggleClass function to not trigger

Adding a column dynamically to a table on click with JS/Jquery is achieved as demonstrated below $("#btn").click(function(){ $('#week_title').append('<th>Week '+count+'</th>'); count++; $('.tag&ap ...

javascriptjqueryhtml

What is the process of choosing a language (English/French) within a pop-up?

<body style="text-align:center"> <h2>Popup</h2> <div class="popup" onclick="myFunction()">Interact with me to show/hide the popup! <span class="popuptext" id="myPopup">A Simple Popup!</span> </div> <script& ...

javascripthtmlwebpopuppopupwindow

Activating list anchor upon click

I have a list that looks like this: <!-- List --> <ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling"> <li class="nav-item"> <a class="nav-link active" id="link1" href="{{ ...

javascripthtmljquerycssbootstrap-5

I struggled to modify the image cropping code to specify a particular image

(I will attempt to explain my issue once again) I came across a script online which can be viewed at this link : Link However, I am having trouble modifying the code to suit my needs. The script currently starts working on image upload, but I want it t ...

javascripthtmljqueryajax

Instructions for implementing this script in HTML and JavaScript: utilize the clone() function

I came across this code snippet here function displaytickets(){ var $panel = $('<div/>').addClass('col-xs-3 panel panel-default') $panel.append($('<div><h3 class="panel-title">Title</h3></div>&a ...

javascriptjqueryhtmlclone

What is the best way to align icons in the center alongside text or paragraphs using react?

I'm struggling with centering my icons like <GrTools size="30px"/> next to my text. It's causing some alignment issues with my styled components. Here is my JavaScript: <div id='paragraph' className="container"> ...

htmlreactjscenterreact-icons

The Angular Material Tree component is not rendering properly in an Angular tutorial demonstration

Upon completing the installation of @angular/material, @angular/cdk, and @angular/animations through npm install --save, I attempted to reconstruct the flat tree example provided by Angular. Unfortunately, even after addressing the error message stating Co ...

cssangulartreeangular-material

Restricting HTML Code within a DIV Container

I am currently developing a plugin and widget-centric CMS system. In this setup, a widget consists of a snippet of HTML/JavaScript code that is contained within a main div element known as the widget div. For JavaScript frameworks, I have opted to use jQ ...

jqueryhtmljquery-ui

Stop Gmail from Removing Attached HTML Files

I successfully developed an HTML file with its own CSS styling and custom HEAD tags to ensure it displays well in mobile browsers. I managed to make it work with PHP as a file attachment. However, the issue arises when Gmail distorts the view of the file ...

htmlgmail

CSS resetting can lead to tables appearing misaligned

After applying a CSS reset to my website's stylesheet (which is valid as CSS 2.0 and used with XHTML 1.0 transitional webpage), I noticed that a table on my website no longer looks correct. Specifically, the table is now positioned incorrectly and the ...

htmlcssxhtmlcss-tables

What causes the fixed div to appear when scrolling horizontally?

I have replicated this issue in a live example: http://jsfiddle.net/pda2yc6s When scrolling vertically, a specific div element sticks to the top. However, if the window is narrower than the wrapper's width and you scroll horizontally, the sticky elem ...

javascriptjquerycss

Tricky problem with z-index - how to position a CSS3 triangle under the menu

Hey there, thank you for taking the time to look into my issue. I'm currently working on a menu design that I would like to resemble this example: The key feature here is creating triangular shapes on either side and positioning them beneath the men ...

htmlcssz-index

Automatically integrating Nivo Lightbox into your website

I incorporated Nivo Lightbox into my website, seamlessly integrating all images with the plugin using the following code: <div class="portfolio-item"> <div class="portfolio-thumb "> <a class="lightbox" data-lightbox-type="ajax" title="Strat ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for transferring data to index.html from Fetch API

Trying to transfer data from an API to my website has been a challenging task. The structure of my directories is as follows: project > server.js | public public > index.html | styles.css A snippet of my code in server.js shows the process: ...

htmlnode.jsreactjsexpress