我试图给出一个带有边框半径背景的跨度.没有自动换行就可以正常工作.但是当有自动换行时,它看起来像这样：

你可以猜到,我只需要将边缘弄圆(除了左上边缘).我不认为我可以使用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解决方案也很好

编辑3：通过包括这个我接近我想要的东西：

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

掩盖不必要的差距.现在的结果是这样的：

我现在唯一的问题是下面的线与上面的线重叠.如果上线与底线重叠,那么问题就解决了.