Javascript 基于同级'；动态设置CSS边框左下半径；s宽度

我正在寻找一种方法来实现twitter在其messenger中关于

边界半径的功能。为了便于解释，我首先添加一些照片：

设置了
边框左下半径的图像：


无边框左下半径的图像：


你知道twitter是如何根据所附文本消息的宽度动态设置
边框半径的吗


.image{
边界半径：1.25雷姆1.25雷姆0 1.25雷姆；
显示：块；
左边距：自动；
宽度：70%；
}
.文本{
边界半径：01.25雷姆；
浮动：对；
背景色：rgb（230236240）；
高度：40px；
最大宽度：70%；
垫面：5px；
}
.分隔器{
显示：块；
边缘顶部：80px；
}

这是文本
为了演示这个示例，这只是一个相对较长的文本！！
根据您的解释

我为你们班的
img
添加了一个
边界半径，如下所示：

border-radius: 1.25rem 1.25rem 0 0;

.text p{
  margin: 0 7px;
}

然后，我在文本类中添加了一个填充，以使其更加美观。替换
span
以设置
p
元素，如下所示：

border-radius: 1.25rem 1.25rem 0 0;

.text p{
  margin: 0 7px;
}

这样，文本就会远离
边框半径

您需要向类中添加
.text{width:fit content}

因此，当文本宽度等于img宽度时，我们最终添加了js来调整
边框左下半径。在宽度相等的情况下，我们创建类来添加：

.border-bottom-left-radius{
  border-bottom-left-radius: 0 !important;
}

正如hatef在评论中提到的那样。重新加载窗口是动态的，但不调整大小。为此，我根据此答案中的现有代码改编了代码：

通过添加此js，如果要调整body元素的大小，它将检测body元素的更改：


displayWindowsSize（）；
addEventListener（“调整大小”，显示窗口大小）；
函数displayWindowsSize（）{
const imgEl=document.getElementById（'img'）；
const textEl=document.getElementById（'text'）；
if（imgEl.offsetWidth文本el.offsetWidth）{
imgEl.classList.remove（“自定义半径”）；
}
}
.image{
边界半径：1.25雷姆1.25雷姆0 1.25雷姆；
显示：块；
左边距：自动；
宽度：70%；
}
.文本{
浮动：对；
背景色：rgb（230236240）；
边界半径：01.25雷姆；
左边距：自动；
宽度：适合的内容；
最大宽度：70%；
填充：5px0；
}
.文本跨度{
显示：块；
左侧填充：20px；
右侧填充：5px；
}
.自定义半径{
边框左下半径：0！重要；
}

这是文本这是文本这是文本
根据您的解释

我为你们班的
img
添加了一个
边界半径，如下所示：

border-radius: 1.25rem 1.25rem 0 0;

.text p{
  margin: 0 7px;
}

然后，我在文本类中添加了一个填充，以使其更加美观。替换
span
以设置
p
元素，如下所示：

border-radius: 1.25rem 1.25rem 0 0;

.text p{
  margin: 0 7px;
}

这样，文本就会远离
边框半径

您需要向类中添加
.text{width:fit content}

因此，当文本宽度等于img宽度时，我们最终添加了js来调整
边框左下半径。在宽度相等的情况下，我们创建类来添加：

.border-bottom-left-radius{
  border-bottom-left-radius: 0 !important;
}

正如hatef在评论中提到的那样。重新加载窗口是动态的，但不调整大小。为此，我根据此答案中的现有代码改编了代码：

通过添加此js，如果要调整body元素的大小，它将检测body元素的更改：


displayWindowsSize（）；
addEventListener（“调整大小”，显示窗口大小）；
函数displayWindowsSize（）{
const imgEl=document.getElementById（'img'）；
const textEl=document.getElementById（'text'）；
if（imgEl.offsetWidth文本el.offsetWidth）{
imgEl.classList.remove（“自定义半径”）；
}
}
.image{
边界半径：1.25雷姆1.25雷姆0 1.25雷姆；
显示：块；
左边距：自动；
宽度：70%；
}
.文本{
浮动：对；
背景色：rgb（230236240）；
边界半径：01.25雷姆；
左边距：自动；
宽度：适合的内容；
最大宽度：70%；
填充：5px0；
}
.文本跨度{
显示：块；
左侧填充：20px；
右侧填充：5px；
}
.自定义半径{
边框左下半径：0！重要；
}

这是文本这是文本这是文本
嘿，谢谢你抽出时间回答我的问题。然而，如果你看我在上面发布的第一张照片，文本的宽度是动态的，它会根据内容而变化。最大宽度与内容相匹配，这仅适用于相对较长的文本。@Mr.Robot我通过将span元素替换为p元素实际解决了这一问题，因为p是显示块默认值，span是内联。如果你用短文本来检查这个例子，它很好哦，好吧，我认为唯一的方法是使用js或jquery，对你来说合适吗？@hatef你调整窗口大小的想法是对的，所以我用从现有主题中提取的代码更新了我的答案，以使它更清晰（尽管我并没有真正达到这样做的目标）。对于类名，这里的示例确实需要澄清。但如果你对我未来的答案有任何其他建议，我很乐意知道。太好了，我编辑了你的代码，使它更易于阅读。我希望你不介意！：）嘿，谢谢你抽出时间回答我的问题。然而，如果你看我在上面发布的第一张照片，文本的宽度是动态的，它会根据内容而变化。最大宽度与内容相匹配，这仅适用于相对较长的文本。@Mr.Robot我通过将span元素替换为p元素实际解决了这一问题，因为p是显示块默认值，span是内联。如果你用短文本来检查这个例子，它很好用哦，好吧，我认为唯一的方法是使用js或jquery，对你来说合适吗？@hatef你是对的