jquery - 带边框半径的多线圆 Angular

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

edit2:我也可以使用 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/