Ways to eliminate line breaks and <br> tags in text using only CSS to create a button that trunc

I am currently working on incorporating a truncated text button using only CSS. The issue I'm facing is that the "show more" button doesn't ignore the line breaks or any other relevant HTML within the teaser and text body. This is causing too much white space below the teaser text as the button is being pushed down. Ideally, I would like the "show more" button to appear right next to the last word in the teaser text, regardless of any line breaks present. Here is my approach:

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;
  }
}

Answer №1

Placing the label within the paragraph allows it to align with the text and become part of the content of the <p> instead of being positioned after the </p> line-break.

It is recommended to add the br in the CSS as well, here are some examples:

  • You can change it from absolute to static:

.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/

  • Alternatively, you can make it float and adjust margin and clear properties:

.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/

  • Another option is to set display to none/initial:

.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

Answer №2

To ensure the 'show more' button flows next to the text, try applying display: inline on the .read-more-trigger.

To prevent the 'show more' button from being obstructed, set display: none on .read-more-target (you can explore alternative solutions as well). Remember to revert it to display: inline when displaying the text (e.g., in the

.read-more-state:checked ~ .read-more-wrap .read-more-target
selector).

Additionally, consider relocating the <br /> tags within the span with the read-more-target class.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Methods to prevent images from spilling over into divs?

I am looking to implement a unique functionality that involves three images sliding out of the page to the right, fading in the process, and not overflowing. Simultaneously, three other images slide in to take their place. If you want to see the Framework ...

Have you ever wondered how to disable a tooltip in React Material UI after clicking on it? Let

I am working with a Material-UI tab component and I would like to include a tooltip feature. The issue I am facing is that the tooltip does not disappear when I click on the tab. It should hide after clicking on the tab. Currently, the tooltip remains vi ...

What criteria do browsers follow to determine the specific colors to use for border styles like inset and outset?

When I set border: 1px outset blue; as the style for an element, the browser displays two distinct border colors: one for the top and left borders, and another for the bottom and right borders. li { border: 10px outset #0000FF; color: #FFF; ...

The background of the body isn't showing up on the

I'm having trouble setting the background on my page. The background works for another div on the same page, but not on the body background itself. <!DOCTYPE HTML> <html> <head> <title>iDeas.com</title> <link rel=" ...

Problem with the hover functionality of the <li> tag

I'm having an issue with applying the hover property to the li element in the sidebar. The hover effect works, but the icon tag is not showing the hover effect. I want the icon to also show the hover effect along with the li's hover effect. Here ...

`Error with Bootstrap breakpoints in mobile display`

While working on a responsive login layout using Bootstrap 5, I encountered a strange issue. The design looked fine in the web view, but when switching to mobile view, the md and sm breakpoints didn't trigger as expected. However, after pasting the co ...

Every time I input information into the form, it keeps coming back as undefined

function displayProduct() { var product = document.getElementById("productForm"); var item = product.elements["item"].value ; document.getElementById("outputResult").innerHTML = item ; } <div> <p id="outputResult"></p> </di ...

Why does Socket.IO seem to be registering two clients instead of just one when there is only one connection

When using my app, the user first lands on the home screen where they can select their username. They then proceed to another page and from there, navigate to the room entry page. The issue I'm facing is with a specific section of my code that update ...

Using JavaScript to invoke Applescript commands

Is it feasible to execute Applescript from JavaScript? I would be grateful if someone could offer a sample code or useful reference link. ...

HTML5 pattern grouping feature is not functioning as expected

I am attempting to validate this regular expression pattern="([a-zA-Z]+[0-9]*){4,}", which essentially means: It must always start with an alphabetic character. If a number is included, there must be at least 4 characters in total; for example, aaaa would ...

Using the HTML5 time element to include milliseconds in a form

If we take a look at this website, we can see various examples of HTML5 form options, one being the "time" element. Can we customize the time element to include milliseconds as well? I'm not interested in using a plain text box as a fallback option. ...

Tips on how to horizontally align an icon and text using Material UI

As a newcomer to Material UI, I am facing an issue where my icon and text are not aligned: What I'm aiming for: This is the code I have so far: <div style={{ display: 'inline-flex', VerticalAlign: 'text-bottom', Bo ...

The row in the table is not reaching its maximum height

Trying to design a layout with a topbar followed by a split layout has posed some challenges. The main issue I encountered was the need for the width and height to adjust automatically based on the browser size. To address this, I attempted to use a table ...

What is the best way to split a Bootstrap row into five equal-sized columns?

Trying to divide a Bootstrap row into five columns can be tricky when you only have 12 units available on the device. How can this division be achieved successfully? ...

Server time dictates the operation of Moment.js

I've been working with Moment.js and it's functioning correctly, but I can't seem to figure out how to make it run on server time instead of local time. I've tried a few things, but haven't had any luck. I'm unsure of how to ...

The functionality of Bootstrap v4 push and pull grid classes seems to be failing to meet expectations

In the process of developing a web application, I am using Bootstrap v4 (alpha 3) to create a responsive layout. Most elements are working well, however, I am facing difficulties rearranging my cards using the push and pull classes in Bootstrap. The intend ...

The overflow:hidden feature doesn't appear to be functioning as expected

I am struggling to hide the text details within a div containing text and image, organized in ul li structure. Despite applying overflow hidden to the .sbox class, the text details refuse to remain hidden and appear to be overflowing. Explore this issue o ...

Finding Elements in a Frameset in HTML with the Help of Selenium WebDriver

Below is the HTML code snippet I am working with: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> ... (truncated for brevity) ... </html> I am specifically inter ...

Retrieving table information using javascript

My goal is to retrieve information from the <td> elements within the following HTML table: <table class="datadisplaytable" summary="This table lists the scheduled meeting times and assigned instructors for this class.."> <caption class="cap ...

Eliminate screen flickering during initial page load

I've been developing a static website using NuxtJS where users can choose between dark mode and default CSS media query selectors. Here is the code snippet for achieving this: <template> <div class="container"> <vertical-nav /> ...