Implementing curved edges with multiple lines and border radius

Question

Implementing curved edges with multiple lines and border radius

Trying to give a span with a background a border radius poses a challenge when word-wrap is involved. The desired outcome is rounded edges, except for the top left edge, but achieving this with the border-radius property seems tricky.

If anyone has an innovative idea on how to accomplish this, please share! Thank you.

edit: Here are the codes I've been working with:

.messageTextCont {
  margin-left: 5px;
  word-break: break-word;
}
.messageText {
  font-size: 17px;
  font-weight: 300;
  color: #FBFDFE;
  background-color: #402060;
  padding: 0px;
  box-shadow: 5px 0 0 #402060, -5px 0 0 #402060;
  line-height: 23px;
  -moz-border-bottom-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
}

edit2: Open to solutions involving JavaScript as well

edit3: A step closer to the desired design by using the following styling:

-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;

However, this method applies rounded corners where not intended. Despite partially resolving the issue by overlapping lines slightly, now facing letter overlap. Would appreciate any suggestions to tackle this problem directly without compromising the design.

edit4: Employed box shadows to mask unwanted gaps in the layout:

box-shadow: 5px 0 0 #402060, -5px 0 0 #402061, -5px -3px 0 orange, 5px -3px red;

The current result showcases progress; however, the lower line still overlaps the upper one. If there's a technique to reverse this overlap while maintaining the aesthetic, all input is welcome.

jquery html css background-color

Answer 1

Answer №1

[RESOLVED] : Check out my solution below:

.messageText {
  font-size: 17px;
  font-weight: 300;
  color: #FBFDFE;
  background-color: #402060;
  padding: 0px;
  box-shadow: 5px 0 0 #402060, -5px 0 0 #402061, 5px 5px 0 #402060, -5px 5px #402060;
  line-height: 23px;
  -moz-border-bottom-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}

You can view the working example on jsFiddle:

http://jsfiddle.net/vpo2x84s/3/

Answer 2

[RESOLVED] : Check out my solution below:

.messageText {
  font-size: 17px;
  font-weight: 300;
  color: #FBFDFE;
  background-color: #402060;
  padding: 0px;
  box-shadow: 5px 0 0 #402060, -5px 0 0 #402061, 5px 5px 0 #402060, -5px 5px #402060;
  line-height: 23px;
  -moz-border-bottom-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}

You can view the working example on jsFiddle:

http://jsfiddle.net/vpo2x84s/3/

Answer 3

Answer №2

To achieve this effect, simply include the CSS property box-decoration-break: clone;

Check out this JSFiddle example

Answer 4

To achieve this effect, simply include the CSS property box-decoration-break: clone;

Check out this JSFiddle example

Answer 5

Answer №3

Completing this task requires a significant amount of effort for such a simple effect. However, in order to address your question, here is one approach:

The process involves detecting line breaks and inserting a new <span> element. Essentially, you are creating additional spans for each subsequent line.

To detect line breaks, the text needs to be split at all spaces, words removed, re-added word by word while monitoring the height of the container parent. If the height increases, a line break has occurred.

Below is a JavaScript solution using jQuery that is quick but effective:

var textContainer = $('span');

textContainer.each(function(){
    var current = $(this);
    var text = current.text();

    var words = text.split(' ');

    current.text(words[0]);
    var height = current.height();

    // iterate through text
    for(var i = 1; i < words.length; i++){
        // save current text
        var origText = current.text();
        // insert new word
        current.text(current.text() + ' ' + words[i]);

        // check for increased height
        if(current.height() > height){
            // remove recently inserted word to avoid line break
            current.text(origText);
            // insert line break and new span
            var linebreak = $('<br />').insertAfter(current);
            current = $('<span>').insertAfter(linebreak);
            // place the removed word into the new span
            current.text(current.text() + ' ' + words[i]);
        }
    }
});

Some parts of the code were adapted from this Source, tailored to suit your requirements.

View it in action on JSFiddle

It's important to note that this code is a basic implementation. For frequent use, consider optimizing it for better performance.

Answer 6

Completing this task requires a significant amount of effort for such a simple effect. However, in order to address your question, here is one approach:

The process involves detecting line breaks and inserting a new <span> element. Essentially, you are creating additional spans for each subsequent line.

To detect line breaks, the text needs to be split at all spaces, words removed, re-added word by word while monitoring the height of the container parent. If the height increases, a line break has occurred.

Below is a JavaScript solution using jQuery that is quick but effective:

var textContainer = $('span');

textContainer.each(function(){
    var current = $(this);
    var text = current.text();

    var words = text.split(' ');

    current.text(words[0]);
    var height = current.height();

    // iterate through text
    for(var i = 1; i < words.length; i++){
        // save current text
        var origText = current.text();
        // insert new word
        current.text(current.text() + ' ' + words[i]);

        // check for increased height
        if(current.height() > height){
            // remove recently inserted word to avoid line break
            current.text(origText);
            // insert line break and new span
            var linebreak = $('<br />').insertAfter(current);
            current = $('<span>').insertAfter(linebreak);
            // place the removed word into the new span
            current.text(current.text() + ' ' + words[i]);
        }
    }
});

Some parts of the code were adapted from this Source, tailored to suit your requirements.

View it in action on JSFiddle

It's important to note that this code is a basic implementation. For frequent use, consider optimizing it for better performance.

Implementing curved edges with multiple lines and border radius

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to obtain the vertex coordinates of an aframe box?

Tips for using the $each() function within a jquery append to retrieve object-based conditions for parameters

Creating a sticky popup feature for your Chrome extension

Concerns with the adaptability of CSS grid rows

An unusual 1px variance appears in the background-image on Internet Explorer

Place one div element with a float property set to AUTO, followed by another div element that expands to

Show a web address inside a div element upon the page loading

Having trouble with $.post request to a different domain in a node.js/express app running on port 8081

Strategies for handling divisions while resizing the browser界面 manipulating divisions during

Encountered an Unrecognized Procedure Error - Reference Number: -99 when attempting to access Mandrill account users

The footer is failing to appear in its correct position on the homepage of the Rails application

Avoid the issue of a fixed position navigation bar overlapping with a sticky footer

What is causing my DropDown List filter to reset when using Pagination?

JavaScript validation malfunctioning

Are there any unauthorized symbols in the path?

I am eager to create a vibrant striped table using React.js, making use of the map function

Generating a dropdown menu using JavaScript from a JSON data source

What is the procedure for removing all cells from the table?

What might be the reason my jquery counter function is not functioning properly?

How can I retrieve the second letter in Materialize CSS FormSelect by using the keyboard?