Как игнорировать br или разрывы строк в тексте с помощью чистой текстовой кнопки css
Я пытаюсь реализовать усеченную текстовую кнопку в чистом 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;
}
}
2 ответа
Решение
В том числе 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">Пытаться display: inline на .read-more-triggerпоэтому следующий текст (кнопка "Показать больше") будет отображаться рядом с текстом.
А также display: none на .read-more-target так что это не помешает работе кнопки "показать больше" (вы можете найти другие способы добиться этого). Не забудьте установить его обратно display: inline когда текст должен быть показан (т.е. в .read-more-state:checked ~ .read-more-wrap .read-more-target селектор).
Редактировать: также, вы можете переместить <br /> теги внутри span с read-more-target учебный класс.