“打开”/占卜 HTML 段落

"Opening"/Divinding an HTML paragraph

本文关键字：HTML 段落 占卜 打开      更新时间：2023-09-26

这个问题可能是一个有趣的问题......在显示文本的网页上，我需要一个特定的行为：当用户点击一些特殊单词时，该单词的解释会在点击的单词下方打开。所有的问题是：它应该真正在单词下方打开，就像将段落"打开"成两段，而不是让后面的文本跳到下一行。

我找到了一个使用 CSS float 属性运行良好的解决方案。你可以在那里看到它(会比下面的代码说得更多(：http://jsfiddle.net/3gwzx/3/

此解决方案的主要问题是它使用嵌套跨度。而且，由于 span 不是块标签，因此填充不适用于它们。因此，在灰色框中，文本永远不会有任何水平填充(垂直填充是可以的( - 否则它会改变框本身的大小 - 还是我错过了什么？- 这很糟糕。有人有解决方案吗？我应该以另一种方式重新思考这个问题吗？

非常感谢！

以下是 HTML 的外观： 

<body onload="putListeners()">
<p>This is the normal text here, you cannot click it. But some words needs long
explanations, like this one : <span class="note">click on me
    <span class="noteTxt">The explanation begins here <a class="foo" href="bar.html"> and
    could have link</a> that one should be able to click. 
    And the note can be loooong, long, long, very, very long.
    </span>
  </span> 
And here, the text carry on. It could carry on for a long, long time.
And with all the other solutions I tried, this part of the text "jumps" after the note,
on a new line, when it appears. What I like here is that, when you open the note, 
it really "open the paragraphs in two". But i cannot give a padding
to those nested span… I should have a div… but you cannot put a div 
inside a span !</p>
</body>

这是 JS

function putListeners() {
    //just listens to the text…
    var elements = document.getElementsByClassName("note");
    for (var i = 0; i < elements.length; i++) {
       elements[i].addEventListener("click", showNote, false);
    }
};
function showNote()
{
    //content to show
    var currentTxt;
    //finds the nested noteTxt
    for (var i = 0; i < this.childNodes.length; i++) {
        if (this.childNodes[i].className == "noteTxt") {
          currentTxt = this.childNodes[i];
         break;
      }        
    }
    //displays it or hides it
    if(currentTxt.style.display=="none" || currentTxt.style.display=="")
        {
            currentTxt.style.display="block";
        }
        else
        {
            currentTxt.style.display="none";
        }
     return true;
};

并且，有关信息，CSS 的相关部分(您可能已经弄清楚了它的外观 - Jfiddle 中的完整代码(：

span.note {
    position: static;
}
span.note span.noteTxt {
    display: none;
    float: left;
    color: black;
    width: 100%;
    background-color: #eaeaea;
}
如果要

更改标记的布局行为，在<span>的情况下，可以设置 css 属性display: block将其更改为div 样式布局。

span.asblock {
   display: block;
}

这将为您提供一个行为类似于div 的跨度。

相关文章：