伙计们，我是个新手。我通过努力解决自己制造的问题来学习。我读到一篇关于交换一个句子的文章，我决定让这些句子一个接一个地交换，但到目前为止我失败了。若原句和新句的长度相同，那个就很容易了。但我们假设它们是不同的，有时需要转到另一行以看起来像传统文本。我无法在几个小时内解决它，在附带的屏幕上有一个结果和我想要的。我查看了几个网站和想法。我设法改进了它在屏幕上的显示方式，所以它更连续，但仍然没有填补空白，或者如果文本更长，它也不会扩展。我想在按下一个句子后，用另一个句子代替它，但文本是连续的，没有任何中断。我基于这个网站https://css-tricks.com/swapping-out-text-five-different-ways/.下面是我的html和css代码。
这是一幅我的问题图https://ibb.co/qkqMbwB
<html>
<head>
<meta charset="utf-8"/>
<title>IGE</title>
<link rel="stylesheet" href="3code.css">
</head>
<body>
<div class="flexbox-container">
<input type="checkbox" id="zdanie1Checkbox" />
<label id="zdanie1" for="zdanie1Checkbox">Origxt1.</label>
<input type="checkbox" id="zdanie2Checkbox"/>
<label id="zdanie2" for="zdanie2Checkbox"> Original texsdsdsdsdsdsdsdsdddddd sdsd sdsdsdsd sd sd sdt2.</label>
<input type="checkbox" id="zdanie3Checkbox" />
<label id="zdanie3" for="zdanie3Checkbox">Original tsd ext3.</label>
<input type="checkbox" id="zdanie4Checkbox" />
<label id="zdanie4" for="zdanie4Checkbox">Orig sdsdsddsinalText4.</label>
<input type="checkbox" id="zdanie5Checkbox" />
<label id="zdanie5" for="zdanie5Checkbox">Orixt54.</label>
</div>
</body>
</html>
这是css
body {
padding: 0px 10px 10px 10px;
}
.flexbox-container {
display:flex;
flex-wrap:wrap;
flex-direction: row;
justify-content:flex-start;
align-content:center;
}
#zdanie1 {
position: relative;
}
#zdanie1Checkbox {
display: none;
}
#zdanie1Checkbox:checked + #zdanie1:after {
content: "The outer layer is nearly melted through.";
align-self: stretch;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
color: red;
width:auto!important; /*this set the height to auto for those supporting it (not IE)*/
width:500px; /*for IE, all others override it by the previous rule*/
min-width:500px; /*for the ones that support it (all but IE)*/
padding-right: auto;
}
#zdanie2 {
position: relative;
}
#zdanie2Checkbox {
display: none;
}
#zdanie2Checkbox:checked + #zdanie2:after {
content: "The outer layer is nearly melted through.";
align-self: stretch;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
color: red;
width:auto!important; /*this set the height to auto for those supporting it (not IE)*/
width:500px; /*for IE, all others override it by the previous rule*/
min-width:500px; /*for the ones that support it (all but IE)*/
}
#zdanie3 {
position: relative;
}
#zdanie3Checkbox {
display: none;
}
#zdanie3Checkbox:checked + #zdanie3:after {
content: "Soon the second layer will go.";
align-self: stretch;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
color: red;
width:auto!important; /*this set the height to auto for those supporting it (not IE)*/
width:500px; /*for IE, all others override it by the previous rule*/
min-width:500px; /*for the ones that support it (all but IE)*/
}
#zdanie4 {
position: relative;
}
#zdanie4Checkbox {
display: none;
}
#zdanie4Checkbox:checked + #zdanie4:after {
content: "Then the scanner blinks silver and I’ve got what I came for.";
position: absolute;
align-self: stretch;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
color: red;
overflow-wrap: break-word;
width:auto!important; /*this set the height to auto for those supporting it (not IE)*/
width:500px; /*for IE, all others override it by the previous rule*/
min-width:500px; /*for the ones that support it (all but IE)*/
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
#zdanie5 {
position: relative;
}
#zdanie5Checkbox {
display: none;
}
#zdanie5Checkbox:checked + #zdanie5:after {
content: "The outer layer is nearly melted throu I almost didn’t notice.";
position: absolute;
align-self: stretch;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
color: red;
width:auto!important; /*this set the height to auto for those supporting it (not IE)*/
width:500px; /*for IE, all others override it by the previous rule*/
min-width:500px; /*for the ones that support it (all but IE)*/
}
有很多方法可以实现这一点。最简单、最多样的方法是使用带有onlick事件的JS，如下所示。在这种情况下，有两行用作跨度，这样它们就可以在一个段落中使用。一个默认设置为display: none;，因此不可见。单击该行，即可触发脚本，该脚本将用display: none;隐藏该行，并通过将其更改为display: block;来显示另一行。
function show1b() {
document.getElementById("line-1b").style.display = "block";
document.getElementById("line-1a").style.display = "none";
}
function show1a() {
document.getElementById("line-1a").style.display = "block";
document.getElementById("line-1b").style.display = "none";
}#line-1b {
display: none;
}<span id="line-1a" onclick="show1b()">This is the original text. Click on me to show the alternative text.</span>
<span id="line-1b" onclick="show1a()">This is the alternative text. Click on me to show the original text.</span>仅CSS
给你"错误使用"；输入为带有标签的复选框。您可以使用复选框的id和display: none;来隐藏该复选框。则使用:after起诉标签的id以使用属性content:。然后定义应该使用的etxt。如果复选框id被选中，那么它将显示下面示例中使用的替代文本。
#line-1a {
display: none;
}
#line-1b:after {
content: "This is the original text. Click on me to show the alternative text.";
}
#line-1a:checked + #line-1b:after {
content: "This is the alternative text. Click on me to show the original text.";
}<input id="line-1a" type="checkbox">
<label for="line-1a" id="line-1b"></label>