【问题标题】:how to ignore br or line breaks in text with pure css truncate text button如何使用纯 css 截断文本按钮忽略文本中的 br 或换行符
【发布时间】:2016-10-05 08:59:02
【问题描述】:

我正在尝试在纯 css 中实现一个截断的文本按钮。不幸的是,“显示更多”按钮没有忽略预告片和文本正文中的 br 标签或任何其他相关 html,并且它被按下,在预告片文本下方留下太多空白。 “显示更多”按钮应该就在预告文本中的最后一个单词旁边,我希望能够在不影响显示更多按钮的情况下创建换行符。这是我的尝试:

https://jsfiddle.net/38vpy56q/

html:

<div>
  <input type="checkbox" class="read-more-state" id="post-1" />

  <p class="read-more-wrap">

    Clifton Benevento is pleased to present "Thinking Creatively With Pictures",
    a solo exhibition of paintings and a video by New York based artist Sofia Leiby.
    <br />br />

    <span class="read-more-target">
      Leiby’s research in graphology led her to the field of psychometrics...
      <br /> <br />
      Leiby has indexed the graphic “stimuli” from The Wartegg Test...
      <br /> <br />
      Upon meeting artists Wassily Kandinsky and Paul Klee in the 1920s...
    </span>
  </p>

  <label for="post-1" class="read-more-trigger"></label>

</div>

css:

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  /* max-height: 999em;*/
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  /*padding: 0 .5em;*/
  color: black;
  font-size: .7em;
  line-height: 1;
  border: 0px solid #ddd;
  br {
    display: none;
  }
}

【问题讨论】:

    标签: html css checkbox label truncate


    【解决方案1】:

    在段落中包含label 将使其与文本无关,并成为&lt;p&gt; 的短语内容的一部分,而不是在&lt;/p&gt; 换行符之后。

    您也应该在 css 中包含 br,示例

    • 您可以将其从绝对切换为静态:

    .read-more-state {
      display: none;
    }
    
    .read-more-target{
      opacity: 0;
      max-height: 0;
      font-size: 0;
      transition: .25s ease;
    }
     .read-more-wrap  br {position:absolute;}
    .read-more-state:checked ~ .read-more-wrap  br {position:static}
    .read-more-state:checked ~ .read-more-wrap .read-more-target {
      opacity: 1;
      font-size: inherit;
     /* max-height: 999em;*/
    }
    
    .read-more-state ~ p .read-more-trigger:before {
      content: 'Show more';
    }
    
    .read-more-state:checked ~ p .read-more-trigger:before {
      content: 'Show less';
      
    }
    
    
    .read-more-trigger {
      cursor: pointer;
      display: inline;
      /*padding: 0 .5em;*/
      color: black;
      font-size: .7em;
      line-height: 1;
      border: 0px solid #ddd;
    }
    
     /* border-radius: .25em;
    }*/
    <div>
      <input type="checkbox" class="read-more-state" id="post-1" />
    
      <p class="read-more-wrap">Clifton Benevento is pleased to present “Thinking Creatively With Pictures”, a solo exhibition of paintings and a video by New York based artist Sofia Leiby. In her newest body of work, Leiby mines the rich history of “projective drawing tests”, graphic assessments originating in Gestalt psychology, to self-reflexively address the relationship between mark-making and subjectivity. <br /> <br />
    
        
        <span class="read-more-target">Leiby’s research in graphology led her to the field of psychometrics, or the theory and techniques of psychological assessment, and the history of the graphic test. Used in psychology, these tests present graphic stimuli usually organized in a grid or box that the test-taker responds to with a drawing and a title. The test-taker is then analyzed based on her drawing performance, according to criteria such as drawing time, the order of the squares drawn, refusing to draw, the size and content of the drawings, crossing of the borders of the squares, etc. (artistic ability is not usually considered). Upon completion, the psychoanalyst can deduce personality and diagnose possible psychological disorders. Such criteria is recognized as subjective but still ‘scored’ according to a very particular set of rules. Similar tests are also used to measure gender-role identification, creativity and imagination in corporate hiring and even as a prerequisite exam to join the Italian Armed Forces (The Wartegg Test). The Torrance Test for Creative Thinking, which includes graphic completion components, is widely used today to identify gifted children across the U.S, although there is still a lack of research surrounding most graphic completion tests.  <br /> <br />
    
    Leiby has indexed the graphic “stimuli” from The Wartegg Test (Eugene Wartegg, 1939), The Medallion Test (W.N. de Vletter, 1942), the Torrance Test for Creative Thinking (Ellis Paul Torrance, 1958), The Test for Creative Thinking-Drawing Production (Urban & Jellen, 1995), the Franck Drawing Completion Test (Franck & Rosen, 1949), and other related exams as well as completed specimens. Using silkscreen, she collages these elements that serve as the compositional framework for abstract paintings both colorful and monochromatic. A new video, ‘How to Improve Your Handwriting’ uses humor to underscore the connection between personality and gesture. <br /> <br />
         
    Upon meeting artists Wassily Kandinsky and Paul Klee in the 1920s, Wartegg took inspiration from Kandinsky’s graphic theories in ‘Point and Line to Plane’ when developing the stimuli of his own graphic test. In observing parallels between the field of psychometrics, art theory and criticism, Leiby brings the graphic marks relegated to psychoanalysis full circle back to the realm of fine art; working within her own test-taking environment, Leiby’s paintings function as self-assessments of the personality and creativity of the artist. </span> <label for="post-1" class="read-more-trigger"></label></p>
     
      
    </div>
    
    <img src="http://abelowdesign.com/sofialeiby/img/tcwp/3.jpg" width="400px">

    https://jsfiddle.net/38vpy56q/2/

    • 或使其浮动并切换边距并清除

    .read-more-state {
      display: none;
    }
    
    .read-more-target{
      opacity: 0;
      max-height: 0;
      font-size: 0;
      transition: .25s ease;
    }
     .read-more-wrap  br {float:left; margin:0 0;}
    .read-more-state:checked ~ .read-more-wrap  br {clear:both;margin: 0.5em 100% }
    .read-more-state:checked ~ .read-more-wrap .read-more-target {
      opacity: 1;
      font-size: inherit;
     /* max-height: 999em;*/
    }
    
    .read-more-state ~ p .read-more-trigger:before {
      content: 'Show more';
    }
    
    .read-more-state:checked ~ p .read-more-trigger:before {
      content: 'Show less';
      
    }
    
    
    .read-more-trigger {
      cursor: pointer;
      display: inline;
      /*padding: 0 .5em;*/
      color: black;
      font-size: .7em;
      line-height: 1;
      border: 0px solid #ddd;
    }
    
     /* border-radius: .25em;
    }*/
    <div>
      <input type="checkbox" class="read-more-state" id="post-1" />
    
      <p class="read-more-wrap">Clifton Benevento is pleased to present “Thinking Creatively With Pictures”, a solo exhibition of paintings and a video by New York based artist Sofia Leiby. In her newest body of work, Leiby mines the rich history of “projective drawing tests”, graphic assessments originating in Gestalt psychology, to self-reflexively address the relationship between mark-making and subjectivity. <br /> <br />
    
        
        <span class="read-more-target">Leiby’s research in graphology led her to the field of psychometrics, or the theory and techniques of psychological assessment, and the history of the graphic test. Used in psychology, these tests present graphic stimuli usually organized in a grid or box that the test-taker responds to with a drawing and a title. The test-taker is then analyzed based on her drawing performance, according to criteria such as drawing time, the order of the squares drawn, refusing to draw, the size and content of the drawings, crossing of the borders of the squares, etc. (artistic ability is not usually considered). Upon completion, the psychoanalyst can deduce personality and diagnose possible psychological disorders. Such criteria is recognized as subjective but still ‘scored’ according to a very particular set of rules. Similar tests are also used to measure gender-role identification, creativity and imagination in corporate hiring and even as a prerequisite exam to join the Italian Armed Forces (The Wartegg Test). The Torrance Test for Creative Thinking, which includes graphic completion components, is widely used today to identify gifted children across the U.S, although there is still a lack of research surrounding most graphic completion tests.  <br /> <br />
    
    Leiby has indexed the graphic “stimuli” from The Wartegg Test (Eugene Wartegg, 1939), The Medallion Test (W.N. de Vletter, 1942), the Torrance Test for Creative Thinking (Ellis Paul Torrance, 1958), The Test for Creative Thinking-Drawing Production (Urban & Jellen, 1995), the Franck Drawing Completion Test (Franck & Rosen, 1949), and other related exams as well as completed specimens. Using silkscreen, she collages these elements that serve as the compositional framework for abstract paintings both colorful and monochromatic. A new video, ‘How to Improve Your Handwriting’ uses humor to underscore the connection between personality and gesture. <br /> <br />
         
    Upon meeting artists Wassily Kandinsky and Paul Klee in the 1920s, Wartegg took inspiration from Kandinsky’s graphic theories in ‘Point and Line to Plane’ when developing the stimuli of his own graphic test. In observing parallels between the field of psychometrics, art theory and criticism, Leiby brings the graphic marks relegated to psychoanalysis full circle back to the realm of fine art; working within her own test-taking environment, Leiby’s paintings function as self-assessments of the personality and creativity of the artist. </span><label for="post-1" class="read-more-trigger"></label></p>
      
      
    </div>
    
    <img src="http://abelowdesign.com/sofialeiby/img/tcwp/3.jpg" width="400px">

    https://jsfiddle.net/38vpy56q/3/

    • 或显示无/初始

    .read-more-state {
      display: none;
    }
    
    .read-more-target{
      opacity: 0;
      max-height: 0;
      font-size: 0;
      transition: .25s ease;
    }
     .read-more-wrap  br {display:none;}
    .read-more-state:checked ~ .read-more-wrap  br {display:initial;}
    .read-more-state:checked ~ .read-more-wrap .read-more-target {
      opacity: 1;
      font-size: inherit;
     /* max-height: 999em;*/
    }
    
    .read-more-state ~ p .read-more-trigger:before {
      content: 'Show more';
    }
    
    .read-more-state:checked ~ p .read-more-trigger:before {
      content: 'Show less';
      
    }
    
    
    .read-more-trigger {
      cursor: pointer;
      display: inline;
      /*padding: 0 .5em;*/
      color: black;
      font-size: .7em;
      line-height: 1;
      border: 0px solid #ddd;
    }
    
     /* border-radius: .25em;
    }*/
    <div>
      <input type="checkbox" class="read-more-state" id="post-1" />
    
      <p class="read-more-wrap">Clifton Benevento is pleased to present “Thinking Creatively With Pictures”, a solo exhibition of paintings and a video by New York based artist Sofia Leiby. In her newest body of work, Leiby mines the rich history of “projective drawing tests”, graphic assessments originating in Gestalt psychology, to self-reflexively address the relationship between mark-making and subjectivity. <br /> <br />
    
        
        <span class="read-more-target">Leiby’s research in graphology led her to the field of psychometrics, or the theory and techniques of psychological assessment, and the history of the graphic test. Used in psychology, these tests present graphic stimuli usually organized in a grid or box that the test-taker responds to with a drawing and a title. The test-taker is then analyzed based on her drawing performance, according to criteria such as drawing time, the order of the squares drawn, refusing to draw, the size and content of the drawings, crossing of the borders of the squares, etc. (artistic ability is not usually considered). Upon completion, the psychoanalyst can deduce personality and diagnose possible psychological disorders. Such criteria is recognized as subjective but still ‘scored’ according to a very particular set of rules. Similar tests are also used to measure gender-role identification, creativity and imagination in corporate hiring and even as a prerequisite exam to join the Italian Armed Forces (The Wartegg Test). The Torrance Test for Creative Thinking, which includes graphic completion components, is widely used today to identify gifted children across the U.S, although there is still a lack of research surrounding most graphic completion tests.  <br /> <br />
    
    Leiby has indexed the graphic “stimuli” from The Wartegg Test (Eugene Wartegg, 1939), The Medallion Test (W.N. de Vletter, 1942), the Torrance Test for Creative Thinking (Ellis Paul Torrance, 1958), The Test for Creative Thinking-Drawing Production (Urban & Jellen, 1995), the Franck Drawing Completion Test (Franck & Rosen, 1949), and other related exams as well as completed specimens. Using silkscreen, she collages these elements that serve as the compositional framework for abstract paintings both colorful and monochromatic. A new video, ‘How to Improve Your Handwriting’ uses humor to underscore the connection between personality and gesture. <br /> <br />
         
    Upon meeting artists Wassily Kandinsky and Paul Klee in the 1920s, Wartegg took inspiration from Kandinsky’s graphic theories in ‘Point and Line to Plane’ when developing the stimuli of his own graphic test. In observing parallels between the field of psychometrics, art theory and criticism, Leiby brings the graphic marks relegated to psychoanalysis full circle back to the realm of fine art; working within her own test-taking environment, Leiby’s paintings function as self-assessments of the personality and creativity of the artist. </span> <label for="post-1" class="read-more-trigger"></label></p>
     
      
    </div>
    
    <img src="http://abelowdesign.com/sofialeiby/img/tcwp/3.jpg" width="400px">

    http://codepen.io/gc-nomade/pen/pbJYXx

    【讨论】:

    • 谢谢,但由于 br 的原因,您的两个示例仍然将“显示更多”按钮推得很低,这是最初的问题。它应该紧挨着“read.more.wrap”初始文本的最后一个单词,在同一行。
    • @user3697526 ??你说的那些 br 包括在内,你用什么浏览器?第一个 sn-p 在没有过渡的情况下将它们从流中取出,第二个给出了一些过渡,有边距,第三个解决方案显示:codepen.io/gc-nomade/pen/pbJYXx
    • @user3697526 或者你说的是 p 上的默认 1em 边距,它不会在任何地方重置为 0,而是在这里......
    • 几乎!仍然显示更多按钮在不同的行上。 codepen.io/anon/pen/GqJLKE?editors=0110
    • 好吧,我明白了,你想要它在主观性这个词之后吗?是吗?
    【解决方案2】:

    .read-more-trigger 上尝试display: inline,这样下面的文字(“显示更多”按钮)就会出现在文字旁边。

    .read-more-target 上的display: none 这样就不会阻碍“显示更多”按钮的流动(您可能会找到其他方法来实现这一点)。不要忘记在应该显示文本时将其设置回display: inline(即在.read-more-state:checked ~ .read-more-wrap .read-more-target 选择器中)。

    编辑:另外,您可能希望使用 read-more-target 类将 &lt;br /&gt; 标记移动到 span 内部。

    【讨论】:

    • 我之前在 '.read-more-trigger' 上尝试过 'display:inline',但无济于事.. 只是在 '.read-more-target' 上尝试过 'display: none' ,这破坏了功能性。
    • 我已经更新了答案以填补一些空白,您不妨再试一次:-)
    • 谢谢,我已经尝试了这些东西,它越来越接近,但它仍然不是内联的,它失去了过渡的便利性。在一个跨度中的多个换行符中有多个“
      ”标签,所以我不确定移动 br 标签如何工作? jsfiddle.net/zhyehf50
    猜你喜欢
    • 1970-01-01
    • 2017-01-14
    • 2013-10-01
    • 2011-07-07
    • 1970-01-01
    • 2013-12-23
    • 2020-08-08
    • 1970-01-01
    • 2011-10-04
    相关资源
    最近更新 更多