帶邊框半徑的多線圓角

Question

我試圖給一個帶背景的跨度一個邊界半徑。 它在沒有自動換行的情況下工作正常。 但是當有自動換行時，它看起來像這樣：

您可以猜到，我只需要將邊緣倒圓（從左上角開始除外）。 我不認為我可以用 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;
}

編輯 2 ：我也可以使用 js 解決方案

edit3 ：通過包含這個，我非常接近我想要的：

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

它的作用是克隆第一行的樣式，並在出現斷字時將它們應用到第二行。 但問題如下：

現在它准確地克隆了第一行的屬性並將它們應用到第二行，使左上角和右上角也變圓了，這是不應該的。 為了掩蓋這一點，我讓線條重疊了一點，我得到了結果，但現在有些字母也重疊了。 如果我找到了重疊字母問題的解決方案而不是這個，問題就解決了。

edit4 ：我使用了框陰影：

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

掩蓋不需要的間隙。 現在的結果是這樣的：

我現在唯一的問題是下面的線與上面的線重疊。 如果有某種方式使上面的線與底線重疊，那么問題就解決了。

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 ，我對其進行了修改以滿足您的需要。

在 JSFiddle 上查看實際操作

請注意：這真的很快而且很臟。 您可以並且應該優化此代碼以提高性能，以防您經常使用它。

Answer 3

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

JSFiddle