带边界半径的多线圆角

Posted 2023-02-21

【中文标题】带边界半径的多线圆角

【英文标题】：Multi-line rounded corners with border radius

【发布时间】：2015-01-30 23:10:41

【问题描述】：

我正在尝试为具有背景的跨度提供边界半径。没有自动换行它可以正常工作。但是当有自动换行时，它看起来像这样：

如您所料，我只需要对边缘进行圆角处理（左上边缘除外）。我不认为我可以使用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;

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

我现在唯一的问题是下面的线与上面的线重叠。如果有某种方式使上面的线与底线重叠，那么问题就解决了。

【问题讨论】：

很确定这对于纯 CSS 是不可能的

你能展示一下你目前尝试过的代码吗？

不，CSS 无法检测到内容。我怀疑，您需要 JS 来确定换行符的位置并在其中包含一个额外的跨度。

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

文字超过2行怎么办？

【参考方案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/

【参考方案2】：

可以通过添加box-decoration-break: clone;来完成

JSFiddle

【参考方案3】：

你必须做的事情对于这个简单的效果来说太多了。但只是为了回答您的问题，这里有一种方法：

您需要检测换行，然后插入一个新的<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，我对其进行了修改以满足您的需求。

亲身体验here on JSFiddle

请注意：这真的又快又脏。如果您经常使用它，您可以并且应该优化此代码的性能。