明确将<span>标记链接到特定的</span>

Question

我正在尝试在字母周围绘制框以显示单词中的ngram。例如，单词test有3个双字母，'te'，'es'，'st'。当我画框时，我正在改变填充，以便每个框都清晰可​​见。但是，我遇到的问题是我打开<span>标记，打开第二个<span>标记，然后尝试关闭第一个标记，但第二个是什么实际上是关闭的。这会导致以下行为：

我现在的HTML

<span style='border:3px; padding: 0.1em;'>     t
  <span style='border:3px; padding: 0.2em;'>   e
</span>
    <span style='border:3px; padding: 0.3em;'> s
  </span>                                           t
    </span>

有没有办法明确将</span>关联到特定<span>以实现我想要的输出？

这是问题的a JSFiddle。

Answer 1

正如其他人所提到的，<span>代码会关闭最后一次打开的// select all the elements var $elements = jQuery('.find_bigrams'); // iterate through the elements $elements.each(function() { // define this element var $element = jQuery(this); // build an array of characters var text = $element.text().split(''); // initialize padding to zero var pad = 0; // empty this element $element.empty(); // wrap each character in a span with the class "character" // this allows us to find the position of each character jQuery.each(text, function(i, character) { jQuery('<span>', { 'class': 'character', 'text': character }).appendTo($element); }); // define character elements $characters = jQuery('.character', $element); // interate through character elements for this ngram element $characters.each(function() { // define this character element var $this_char = jQuery(this); // define the next character element var $next_char = $this_char.next('.character'); // continue only if there is a next character if ($next_char.length) { // if this or next character is a space, skip to next character if ($this_char.text() == ' ' || $next_char.text() == ' ') { return true; } // define styles for this box element var top = -pad + 'px'; var left = $this_char.position().left; var width = $next_char.position().left + $next_char.width() - $this_char.position().left; var padding = pad + 'px 0'; // add absolutely positioned box element jQuery('<span>', { 'class': 'bigram' }).css({ 'top': top, 'width': width, 'left': left, 'padding': padding }).appendTo($element); // increment padding pad += 3; } }); // remove the positioning elements: .character $characters.contents().unwrap(); }); 这些元素是嵌套的，不能以您建议的方式重叠。

这是使用JavaScript（jQuery）对ngram组（实际上是bigrams）的一种解决方案 它在字母上创建了绝对定位的盒子 我让它跳过空格和unigrams。

body {
  font-family: monospace;
  font-size: 18px;
  margin: 0;
}

.find_bigrams {
  position: relative;
  display: block;
  margin: 3em;
}

.find_bigrams .bigram {
  position: absolute;
  height: 100%;
  border: 1px solid rgba(255, 0, 0, .5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="find_bigrams">test</span>
<span class="find_bigrams">rhinoceros</span>
<span class="find_bigrams">has some spaces</span>
<span class="find_bigrams">has a unigram</span>

{{1}}

Answer 2

简答：没有

答案很长：您的浏览器会始终将结束标记视为属于最里面的开始标记。你可以通过使用其他标签来解决这个问题，例如<span> This <i style="font=style:normal">will</span> override nesting rule</i>，但这违反了W3C规范，并且不能保证在所有浏览器中工作（因为我怀疑它会这样）。

如果您需要做的只是在某些字母周围绘制框，我建议您使用具有不同span或width值的正确嵌套padding标记，图像或HTML画布