有没有办法把它包起来？

Question

我有这两个跨度，用中心文字来创建下划线。现在碰巧该行没有中断，因此完全在下面的行中显示。

span.labeled {
  display: inline-block;
  vertical-align: top;
}

span.label {
  display: block;
  text-align: center;
  border-top: 1px solid black;
}

Answer 1

如果不将标签居中，则可以靠近：

Stylesheet.flatten()

<Button
  style={Stylesheet.flatten([
    {
      backgroundColor: backgroundColor || COLORS.lightRed,
      borderRadius: 3,
      height: 44,
      width: '100%',
     },
     style && style,
  ])}

或者，如果您不介意标签仅在包装元素上对齐，则可以尝试：

p {max-width:320px; line-height:3em; font-family:Arial; color:#666; font-size:12px;}
span[title] {position:relative; border-bottom: 1px solid currentColor;}
span[title]::after {
  content:attr(title);
  position:absolute; top:0; left:0; margin-top:.5em;
}

<p>The baseball players <span title="A">decided</span> that they <span title="B">all would donate</span> $50 <span title="C">annually</span> to cover the $1,000 sponsor fee for the <span title="D">local youth baseball team</span>. <span title="E">No error.</span></p>

仅在铬和野生动物园中进行了测试