多行文本与边界半径使用CSS [重复]

lmvvr0a8 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(111)

此问题在此处已有答案：

How do I add a highlight behind the text via CSS so it looks like Instagram-one below?（2个答案）
19小时前关闭
我想得到的多行文字与背景，其中有边界半径的每一行和背景适合的文字。像下面的图片，但半径在突出显示的圆圈以及。

如下所示（半径以红色显示）

目前我的代码如下所示。

.container { position: absolute; text-align: center;} 

p{
display: inline; 
margin: auto 0.5rem;
text-align: center;
font-size:25px; 
position: relative;
background-color:green; 
color:#ffffff; 
text-align: center;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
border-radius: 0.5rem;
padding: 0.25rem;}

个字符

css

来源：https://stackoverflow.com/questions/77776839/multi-line-text-with-border-radius-using-css

1条答案

按热度按时间

isr3a4wc1#

增加line-height。

p {
  ...
  line-height: 1.45;
}

字符串

的数据

.container {
  text-align: center;
} 

p {
  display: inline; 
  margin: auto 0.5rem;
  text-align: center;
  font-size: 25px;
  background-color: green; 
  color: white; 
  text-align: center;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border-radius: 0.5rem;
  padding: 0.25rem;
  line-height: 1.45;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur officia nemo nisi sapiente ipsum eum autem non. Voluptas eligendi illo minus omnis esse reiciendis rerum ut fuga odit libero!</p>
</div>

的数据

赞(0）回复(0）举报 2024-01-09

我来回答

多行文本与边界半径使用CSS [重复]

1条答案

相关问题

热门标签

最新问答