多行圆角带边框半径

Question

我正在尝试为带有背景的span设置边框半径。如果没有word-wrap，它可以正常工作。但是当存在word-wrap时，它会看起来像这样：

[图片](https://istack.dev59.com/KwwLJ.webp)

你可以猜到，我只需要边缘被圆角化（除了左上边缘）。我不认为我可以使用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: 我也可以接受使用JavaScript的解决方案。

编辑3: 包含以下内容可以让我离所需的结果更近：

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

这个操作会复制第一行的样式，并在单词换行时将其应用于第二行。但问题如下所述：

现在它完全克隆了第一行的属性并将其应用于第二行，使得左上角和右上角也变成了圆角，这是不应该的。为了掩盖这个问题，我让这两行略微重叠，虽然得到了结果，但现在有些字母也重叠了。如果我解决了重叠字母的问题，那么问题就解决了，而不是使用这种方法。

编辑4：我使用了盒子阴影。

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

为了填补不需要的间隙。现在的结果是这样的： 我现在唯一的问题是下面的行与上面的行重叠。如果有一种方法让上面的行重叠下面的行，那么问题就解决了。

- OguzGelal

---

很确定这不可能只用纯CSS实现。 - Paulie_D

如果您提供所需样式的模型，可能会帮助其他人。 - hungerstar

如果文本超过两行怎么办？ - Weafs.py

你的代码很完美，纯CSS解决方案加1(Y)。我建议将其作为答案并附上代码，使其成为被接受的答案。 - Zia Ul Rehman Mughal

@ZiaUlRehmanMughal 好的决定！谢谢。 - OguzGelal

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/

（注：此内容为原文，无需翻译）

- OguzGelal

Answer 2

可以通过添加 box-decoration-break: clone; 来实现。

JSFiddle

- unloco

Answer 3

这个简单的效果需要做的事情太多了。但是为了回答你的问题，这里有一种方法：

您需要检测换行符，然后插入一个新的 <span>。因此，您正在为第二行创建第二个 span。第三个 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]);
        }
    }
});

这段代码的一部分来自于这里的源代码，我进行了修改以适应您的需求。

在JSFiddle上查看它的运行效果。

请注意：这只是一个快速而粗糙的版本。如果您经常使用它，请优化此代码以提高性能。

- ProblemsOfSumit