使用 CSS 和 Javascript 在 show hide div 中对齐文本答案

【问题标题】：Justify text in show hide div with CSS and Javascript使用 CSS 和 Javascript 在 show hide div 中对齐文本
【发布时间】：2014-09-07 00:42:27
【问题描述】：

我有一个显示/隐藏文本的功能，它工作正常。但是，我有两个问题：

尽管我在 CSS 和 JavaScript 中指定了此属性，但我无法证明文本的合理性。
显示文本时无法去掉换行符。我想连接它。使文本合理的唯一方法是将其视为一个新段落，我想避免这种情况。

这是 Javascript 函数（我知道它可能会更好）

    function showHide(mytext) {
     if (document.getElementById('mytext1')) {
            if (document.getElementById('mytext1' + '-show').style.display != 'none') {
                document.getElementById('mytext1' + '-show').style.display = 'none';
                document.getElementById('mytext1').style.display = 'inline';
                document.getElementById('mytext1').style.textAlign ='justify';
            } else {
                document.getElementById('mytext1' + '-show').style.display = 'inline';
                document.getElementById('mytext1').style.display = 'none';
            }
        }

}

这是一些 HTML

     <p class="NeueLite text-justify"> Beginning of the text.<a id="mytext1-show" onclick="showHide('mytext1'); return false;" class ="abstract"> More</a>
               <div id="mytext1" style="display: none;" class="moretext">
    Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.
 <a id="mytext1-hide"  onclick="showHide('mytext1');return false;" href="javascript:void(0)" class="abstract" >Less</a></p></div>

还有我的 CSS 类：

div.moretext {
   font-family: 'Comic Neue', sans-serif !important;
    font-weight: 100 !important;
      line-height: 1.2 !important;
      font-size: 0.8rem !important;
      text-align: justify !important;
      }

【问题讨论】：

如果您将代码放入jsfiddle，人们会更容易回答您的问题

标签： javascript justify

【解决方案1】：

这是因为您将隐藏文本放在<div> 中。请改用<span>。另外，将text-align: justify; 放入<p>。

Working example

【讨论】：

谢谢，太好了。我已严格复制代码，但隐藏链接似乎不起作用。在您添加的查询之后我应该写些什么吗？在那之后我还有另一个功能......
@coralie 你可能不应该复制 document.queryselector(...) 的东西，我只是把它放在那里，因为 onclick=" ... " 似乎不适用于 jsfiddle。
@coralie 或者您可以保留document.queryselector(...)，但从隐藏链接中删除onclick=" ... "。
它就像一个魅力。我也必须使用 .query 来获得 onclick 工作。非常感谢！