Multiline Rounded Corners with Boundary Radius
I am trying to give a range with a background border radius. It works great without words. But when there is a wrapper word, it looks something like this:
As you can guess, I only want the rounded edges (other than the top left edge). I don't think I can do this with the border-radius property, and I don't know how to do it.
Any idea? Thank.
edit : codes
.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 : I'm fine with js solutions too
edit3 . I am so close to what I want, including this:
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
What it means is it clones the styles on the first line and applies them to the second line in case of a word break. But the problem is as follows:
Now it clones exactly the properties of the first row and applies them to the second, making the top-left and top-right corners rounded as well, and shouldn't be. To cover this, I overlapped the lines a bit and I got the result, but now some letters also overlap. Problem solved if I find a solution to the overlapping letters problem instead.
edit4 : i used drop shadows:
box-shadow: 5px 0 0 #402060, -5px 0 0 #402061, -5px -3px 0 orange, 5px -3px red;
To hide unwanted spaces. The result now looks like this:
The only problem I have is that the bottom line overlaps the top line. If there is a way that the top line overlaps the bottom line than the problem is solved.
source to share
[SOLVED] . My solution looks like this:
.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;
}
Here is the jsFiddle:
source to share
All you have to do to do this is too much for this simple effect. But just to answer your question, this is one way to do it:
You need to detect the line wrappers and then insert a new one <span>
. So, you create a second run for the second line. Third, for the third line, etc.
To detect line wrappers, you need to split the text into all spaces, remove the text, re-add word by word, checking the height of the parents. If the height increases, you have a line.
Here is a quick and dirty JavaScript solution using jQuery
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();
// loop 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]);
// height increased?
if(current.height() > height){
// remove just inserted word to NOT line break
current.text(origText);
// insert linebreak and new span
var linebreak = $('<br />').insertAfter(current);
current = $('<span>').insertAfter(linebreak);
// put the removed word into the new span
current.text(current.text() + ' ' + words[i]);
}
}
});
Some of the code from this Source , which I modified to suit your needs.
See it in action here on the JSFiddle
Please note: this is really quick and dirty. You can and should optimize this code for performance if you use it a lot.
source to share