html - flex容器内的css文本交换出错

问题描述

伙计们，我是一个完全的新手。我通过尝试解决我创造的问题来学习。我正在阅读关于交换一个句子的内容，我决定让这些句子一个接一个地交换，但到目前为止我失败了。如果原始句子和新句子的长度相同，则很容易。但是让我们假设它们是不同的，并且有时需要转到另一行才能看起来像传统文本。我无法从几个小时内解决它，在附加的屏幕中有一个结果和我想要的。我正在检查几个网站和想法。我设法改进了它在屏幕上的显示方式，因此它更加连续，但如果文本较长，它仍然不会填充空格或不会扩展。我想在按下一个句子后，将其替换为另一个，但文本是连续的，没有任何中断。我基于这个网站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)*/
      }

标签： htmlcss

解决方案

有很多方法可以实现它。使用最多的最简单方法是使用带有 onlick 事件的 JS，如下所示。在这种情况下，您将 2 行用作跨度，以便它们可以在段落中使用。一个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;。然后你起诉标签的 id:after来使用属性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>

html - flex容器内的css文本交换出错

问题描述

解决方案

推荐阅读