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

Question

我想用圆括号加下划线。这应该是C＃Text的一部分，但如果它在CSS中更容易，没问题。我的问题是，Word的长度可能会有所不同，因此必须为每个单词计算弓。

我的第一个想法是使用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>

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

这个问题有更聪明的方法吗？

Answer 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/

Answer 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元素来计算元素的宽度。