使用CSS和Javascript在show hide div中對齊文本

Question

我有一個顯示/隱藏文本的功能，它工作正常。 但是，我有兩個問題：

1. 盡管我已經在CSS和JavaScript中指定了此屬性，但我無法證明文本的合理性。
2. 顯示文本時，我無法擺脫換行符。 我想將其連接起來。 使文本合理的唯一方法是將其視為新的段落，我想避免。

這是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;
      }

Answer 1

這是因為您將隱藏的文本放在<div> 。 請使用<span> 。 另外，將text-align: justify; 在<p> 。

工作實例