[英]Making Inline for Website page content using HTML, CSS & JS
预期 output：
我需要第一个和第二个 parapragh 应该是内联的，这是我的适当结果。
这是我在 HTML 中尝试的：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div> <div class="content1" style="display:inline"> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br>
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<ul>
<li>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
<li>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
</ul> </div>
<a class="show_hide" data-content="toggle-text">read more...</a>
CSS：
.content1{
text-align: justify;
font-size: 16px;
font-weight: 400;
margin: 0;
line-height: 24px;
}
.content2{
text-align: justify;
font-size: 16px;
font-weight: 400;
margin: 0;
line-height: 24px;
}
.inline{
display: inline-block;
}
Javascript：
<script>
$(document).ready(function () {
$(".content1").hide();
$(".show_hide").on("click", function () {
var txt = $(".content1").is(':visible') ? 'read more...' : 'read less';
$(".show_hide").text(txt);
$(this).prev('.content1').slideToggle(200);
});
});
</scritp>
这是我在 Codepen 中尝试过的：在此处输入链接描述
更新 Codepen链接将 content1 和 content2 转换为span而不是div
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="content2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</span>
<span class="content1" style="display:inline">
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br>
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<ul>
<li>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
<li>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
</ul>
</span>
<a class="show_hide" data-content="toggle-text">read more...</a>
</body>
添加
display:inline;到div。
小提琴来验证。
$(document).ready(function() { $(".content1").hide(); $(".show_hide").on("click", function() { var txt = $(".content1").is(':visible')? 'read more...': 'read less'; $(".show_hide").text(txt); $(this).prev('.content1').slideToggle(200); }); });
div { display: inline; }.content1, .content2 { text-align: justify; font-size: 16px; font-weight: 400; margin: 0; line-height: 24px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="content2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem </div> <div class="content1"> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <ul> <li>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li> <li>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li> </ul> </div> <a class="show_hide" data-content="toggle-text">read more...</a>
CSS 不适用于使用 JS 脚本在页面中动态添加的 HTML 内容
[英]CSS not applied on HTML content dynamically added in the page using a JS script
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.