带边界半径的多行圆角 [英] Multi-line rounded corners with border radius

问题描述

[已解决] ：我改变了方向，而不是从下到上应用框阴影。这里是jsFiddle：，我根据您的需要修改了它。

请参阅in a action 这里的JSFiddle

请注意：这真的很快，肮脏。您可以并且应该优化此代码的性能，以防您使用这么多。

[SOLVED] : Instead of applying the box-shadow from down to up, I changed the direction. Here is the jsFiddle : http://jsfiddle.net/vpo2x84s/3/

I am trying to give a span with a background a border radius. It works fine without word-wrap. But when there is word-wrap, it looks something like this:

As you can guess, I only need the edges to be rounded (except from the top left edge). I don't think I can do it with border-radius property and I have no clue how can I do this.

Any idea ? Thanks.

edit: The 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 also OK with js solutions

edit3 : I get so close to what I want by including this :

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

What this does 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 exactly clones the properties of the first line and applies them to the second, making the top left and top right corner also rounded, which they should not be. To cover that up, I made the lines overlap a little bit and I got the result but now some of the letters are also overlapping. The problem is solved if I find a solution to the overlapping letters issue instead of this.

edit4 : I used box shadows :

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

To cover up the unwanted gaps. Now the result is like this :

The only problem I have now is that the below line overlaps the upper line. If there is some way that the upper line overlaps the bottom line, than problem solved.

解决方案

The stuff you have to do to get this done is way too much for this simple effect. But just in order to answer your question heres one way to do it:

You need to detect line wraps, and then insert a new <span>. So you're creating a second span for the second line. A third, for the third line and so on.

To detect line wraps, you need to split the text at all spaces, remove the text, re-add word by word while checking the parents height. If the height increases, you have a linewrap.

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]);
        }
    }
});

Part of the code is from this Source, which I modified to fit your needs.

See in in action here on JSFiddle

Please note: this is really quick and dirty. You can and should optimize this code for performance, in case you use this a lot.

这篇关于带边界半径的多行圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！