帶邊框半徑的多線圓角

我正在嘗試用背景半徑給出一個跨度。它工作正常，沒有單詞換行。但是，當有自動換行，它看起來是這樣的：帶邊框半徑的多線圓角

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

我現在唯一的問題是，下面的線交疊的上線。如果有某種方式，上面的線與底線重疊，而不是解決問題。

來源

2014-12-02 OguzGelal

相當肯定，這是不可能的純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/

來源

2017-03-31 15:15:00 OguzGelal

爲了達到這個目的，你必須做的事情對於這個簡單的效果來說太過分了。但只是爲了回答你的問題繼承人一種方式來做到這一點：

您需要檢測行換行，然後插入一個新的<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

請注意：這確實是快速和骯髒。你可以也應該優化這個代碼的性能，以防你使用這個很多。

來源

2014-12-03 08:51:30 ProblemsOfSumit

帶邊框半徑的多線圓角

回答

相關問題