大括号下划线的动态文本

Posted 2023-03-05

【中文标题】大括号下划线的动态文本

【英文标题】：Dynamic text underlined by braces

【发布时间】：2014-08-22 10:40:00

【问题描述】：

我想用 round 大括号在单词下划线。这应该是 C# 文本的一部分，但如果它在 CSS 中更容易，没问题。我的问题是单词的长度可以变化，所以弓必须为每个单词计算。

我的第一个想法是使用 CSS box-shadow：

CSS：

#test 
  font-size: 50px;
  background: transparent;
  border-radius: 70px;
  height: 65px;
  width: 90px;
  box-shadow: 0px 6px 0px -2px #00F;
  font-family: sans-serif;

HTML：

<div id="test">Hey</div>

很遗憾，由于动态文本大小，我无法计算它们。

有没有更聪明的方法来解决这个问题？

【参考方案1】：

如果您使用 span 标签，则无需计算宽度。

CSS：

.test 
  font-size: 50px;
  background: transparent;
  border-radius: 70px;
  height: 65px;
  box-shadow: 0px 6px 0px -2px #00F;
  font-family: sans-serif;

HTML：

<span id="test" class="test">Hey</span><br/>
<span class="test">Hey this is longer</span>

工作小提琴：http://jsfiddle.net/Ge8Q3/

【讨论】：

或者，如果需要<div>，<h1>，或者其他块元素，在CSS中添加display: inline=block;达到同样的效果。示例：codepen.io/paulroub/pen/AhoIp

@PaulRoub 好电话，我完全忘记了......但你有一个小错字：inline-block

啊。是的。但是，示例链接是正确的。似乎无法返回并编辑已回复的评论。

【参考方案2】：

我找到了一种不同的方法。

工作小提琴： http://jsfiddle.net/6pEQA/1/

我使用了 javascript 并将宽度设为动态：

textWidth 函数取自here。

$.fn.textWidth = function()
    var self = $(this),
        children = self.contents(),
        calculator = $('<span style="white-space:nowrap;" />'),
        width;

    children.wrap(calculator);
    width = children.parent().width(); // parent = the calculator wrapper
    children.unwrap();
    return width;
;

$(document).ready(function()

    $('#test').css('width',$('#test').textWidth());

);

它也适用于 h1、div 或 span。你可以看看我的小提琴。因为它是使用 span 元素来计算元素的宽度。