动态文本下划线使用大括号表示

Question

我希望用带圆形括号来强调一个词。这应该是 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>

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

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

- Trinitrotoluol

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/

- entropic

---

еҰӮжһңйңҖиҰҒдҪҝз”Ё<div>пјҢ<h1>жҲ–е…¶д»–еқ—зә§е…ғзҙ пјҢеҸҜд»ҘеңЁCSSдёӯж·»еҠ display: inline-block;жқҘиҫҫеҲ°зӣёеҗҢзҡ„ж•ҲжһңгҖӮдҫӢеҰӮпјҡhttp://codepen.io/paulroub/pen/AhoIp - Paul Roub

@PaulRoub 不错的建议，完全忘了……但是你有一个小错误：inline-block。 - entropic

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

Answer 2

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

可工作的示例：http://jsfiddle.net/6pEQA/1/

我使用了JavaScript，并使宽度动态化：

textWidth 函数来自这里。

$.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。你可以检查我的fiddle。因为它使用span元素来计算元素的宽度。

- Bura Chuhadar