C# 用大括号加下划线的动态文本

我想在一个单词下面划一个圆括号。这应该是C#文本的一部分，但如果在CSS中更容易，那就没问题了。我的问题是单词的长度可能会有所不同，因此必须为每个单词计算弓

我的第一个想法是使用CSS框阴影：

CSS:

#测试{
字体大小：50px；
背景：透明；
边界半径：70px；
高度：65px；
宽度：90px；
盒影：0px 6px 0px-2px#00F；
字体系列：无衬线；
}

HTML:

嘿

不幸的是，由于动态文本大小，我无法计算它们

---

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

如果改用span标记，则无需计算宽度

CSS:

.test{
字体大小：50px；
背景：透明；
边界半径：70px；
高度：65px；
盒影：0px 6px 0px-2px#00F；
字体系列：无衬线；
}

HTML:

嘿

嘿，这更长了

---

拉小提琴：

我发现了一种不同的方法

工作小提琴：

我使用javascript并使宽度动态：

textWidth函数取自

$.fn.textWidth=函数（）{
var self=$（此），
children=self.contents（），
计算器=$（''），
宽度；
包装（计算器）；
width=children.parent（）.width（）；//parent=计算器包装
儿童。展开（）；
返回宽度；
};
$（文档）.ready（函数（）{
$（'测试'）.css（'宽度'，$（'测试'）.textWidth（））；
});

---

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

或者，如果需要是

、

或其他块元素，则添加

显示：inline=block到CSS以获得相同的效果。示例：@PaulRoub好电话，我完全忘记了。。。但是您有一点输入错误：
inline block
Argh。是的。不过，示例链接是正确的。似乎无法返回并编辑已回复的评论。
$.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());

});