带边框半径的多线圆角

问题描述：

我正在尝试用背景半径给出一个跨度。它工作正常，没有单词换行。但是，当有自动换行，它看起来是这样的：带边框半径的多线圆角

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

我现在唯一的问题是，下面的线交叠的上线。如果有某种方式，上面的线与底线重叠，而不是解决问题。

相当肯定，这是不可能的纯CSS – 2014-12-02 16:14:16

@Paulie_D我肯定人类有这样的技术和能力。编辑：你添加了“纯CSS”。有没有这样的JS解决方案？ – OguzGelal 2014-12-02 16:15:13

你可以显示代码，你到目前为止尝试过吗？ – progsource 2014-12-02 16:15:28

答

[解决]：我的解决方案是这样的：

.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/

答

为了达到这个目的，你必须做的事情对于这个简单的效果来说太过分了。但只是为了回答你的问题继承人一种方式来做到这一点：

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

要检测换行，需要在所有空格处拆分文本，删除文本，在检查父母高度的同时逐字重新添加。如果身高增加，你有一条线。

下面是使用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]); 
     } 
    } 
});

部分代码是从这个Source，我修改，以适应您的需求的快速和肮脏的JavaScript解决方案。

见行动here on JSFiddle

请注意：这确实是快速和肮脏。你可以也应该优化这个代码的性能，以防你使用这个很多。

带边框半径的多线圆角

相关推荐