[英]Justify text in show hide div with CSS and Javascript
I have a function to show/hide text and it works fine. 我有一个显示/隐藏文本的功能,它工作正常。 I have two issues, however: 但是,我有两个问题:
Here is the Javascript function (it could be better, I know) 这是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';
}
}
}
Here is some HTML 这是一些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>
And the classes of my CSS : 还有我的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;
}
This is because you put the hidden text in a <div>
. 这是因为您将隐藏的文本放在<div>
。 Use a <span>
instead. 请使用<span>
。 Also, put the text-align: justify;
另外,将text-align: justify;
in the <p>
. 在<p>
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.