Question

我试图给出一个背景为边界半径的跨度。没有自动换行就可以正常工作。但是当有自动换行时，它看起来像这样：

enter image description here

你可以猜到，我只需要将边缘弄圆（除了左上边缘）。我不认为我可以使用border-radius属性来做这件事，我不知道如何做到这一点。

有什么想法吗？感谢。

修改：代码

.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 ：我也可以使用js解决方案

edit3 ：我非常接近我的想法，包括：

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

这样做，它克隆了第一行的样式，并在分词的情况下将它们应用到第二行。但问题如下：

enter image description here

现在它完全克隆了第一行的属性并将它们应用到第二行，使得左上角和右上角也是圆形的，它们不应该是圆形的。为了弥补这一点，我让线条重叠一点，我得到了结果，但现在一些字母也重叠了。如果我找到重叠字母问题的解决方案而不是这个问题，问题就解决了。

edit4 ：我使用了框阴影：

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

掩盖不必要的差距。结果是这样的：

enter image description here

我现在唯一的问题是下面的线与上面的线重叠。如果上线与底线重叠，那么问题就解决了。

Answer 1

[求助] ：我的解决方案如下：

.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;
}

这是jsFiddle：

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

Answer 2

为完成这项工作，您必须做的事情对于这种简单的效果来说太过分了。但只是为了回答你的问题，这是一种方法：

您需要检测换行，然后插入新的<span>。所以你要为第二行创建第二个跨度。第三，第三行，依此类推。

要检测换行，您需要在所有空格中拆分文本，删除文本，在检查父项高度时逐字重新添加。如果高度增加，则有线绕。

这是一个使用jQuery的快速而又脏的JavaScript解决方案

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

部分代码来自此Source，我根据您的需要对其进行了修改。

参见行动here on JSFiddle

请注意：这真的很快而且很脏。您可以而且应该优化此代码的性能，以防您经常使用它。

Answer 3

可以通过添加box-decoration-break: clone;

来完成

JSFiddle

带边框半径的多线圆角

3 个答案: