- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试在纯 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;
}
}
最佳答案
包括label
在段落内部将允许它站在文本旁边并成为 <p>
的措辞内容的一部分。而不是在 </p>
之后换行符。
你应该包括 br
在 css 中也是如此,示例
.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">
关于html - 如何使用纯 css 截断文本按钮忽略文本中的 br 或换行符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37645791/
表架构 DROP TABLE bla; CREATE TABLE bla (id INTEGER, city INTEGER, year_ INTEGER, month_ INTEGER, val I
我需要拆分字符串/或从具有以下结构的字符串中获取更容易的子字符串。 字符串将来自 window.location.pathname 或 window.location.href,看起来像 text/n
每当将对象添加到数组中时,我都会尝试更新 TextView ,并在 TextView 中显示该文本,如下所示: "object 1" "object 2" 问题是,每次将新对象添加到数组时,它都会覆盖
我目前正在寻找使用 Java 读取网站可见文本并将其存储为纯文本字符串的方法。 换句话说,我想转换成这样: Hello stupid World进入“ Hello World ” 或者类似的东西 Un
我正在尝试以文本和 HTML 格式发送电子邮件,但无法正确发送正确的 header 。特别是,我想设置 Content-Type header ,但我找不到如何为 html 和文本部分单独设置它。 这
我尝试了上面的代码,但我无法绑定(bind)文本,我怎样才能将资源内部文本 bloc
我刚刚完成了 Space Shooter 教程,由于没有 GUIText 对象,所以我创建了 UI.Text 对象并进行了相应的编码。它在统一播放器中有效,但在构建 Web 应用程序后无效。我花了一段
我有这个代码: - (IBAction)setButtonPressed:(id)sender { NSUserDefaults *sharedDefaults = [[NSUserDefau
抱歉标题含糊不清,但我想不出我想在标题中做什么。无论如何,对于图像上的文本,我使用了 JLabel 文本并将其添加到图标中。 JLabel icon = new JLabel(new Imag
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
我在将 Twitter 嵌入到我从 HTML 5 转换的 wordpress 运行网站时遇到问题。 我遇到的问题是推文不是我的自定义字体... 这是我无法使用任何 css 定位的 HTML 代码,我正
我正在尝试找到解决由于使用以下形式的代码而导致的冗余字符串连接问题的最佳方法: logger.debug("Entering loop, arg is: " + arg) // @1 在大多数情况下,
我写了这个测试 @Test public void removeRequestTextFromRouteError() throws Exception { String input = "F
我目前正在创建一个正则表达式来拆分所有匹配以下格式的字符串:&[文本],并且需要获取文本。字符串可能类似于:something &[text] &[text] everything &[text] 等
有没有办法将标题文本从一个词变形为另一个词,同时保留两个词中使用的字母?我看过的许多 css 文本动画大多是视觉的,很少有旋转整个单词的。 我想要做的是从一个词过渡,例如“BEACH”到“CHANGE
总结matplotlib绘图如何设置坐标轴刻度大小和刻度。 上代码: ?
我在容器 (1) 中创建了容器 (2)。你能帮忙如何向容器(1)添加文本吗?下面是我的代码 return Scaffold( body: Padding( padding: c
我似乎找不到任何人或任何人这样做过。我试图限制我们使用的图像数量,并想创建一个带有渐变作为其“颜色”的文本,并在其周围设置渐变轮廓/描边 到目前为止,我还没有看到任何将两者结合在一起的东西。 我可以自
我正在为视频游戏暗黑破坏神 2 使用 discord.py 构建一个不和谐机器人。其中一项功能要求机器人从暗黑破坏神 2 屏幕截图中提取项目的名称和属性。我目前正在为此使用 pytesseract,但
我很难弄清楚如何旋转 strip.text theme 中的属性来自 ggplot2 .我使用的是 R 版本 3.4.2 和 ggplot2 版本 2.2.1。 以下是 MWE 的数据。 > dput
我是一名优秀的程序员,十分优秀!