Tips on how to make two Excerpts within each wordpress article

Question

I need tips on how to create Excerpts (summaries) in Wordpress, I have some knowledge on the platform but still very limited and do not know where to start.

There are two summaries within each blog article, a default form. Where the characters to be displayed will be limited. I’ve looked for information in several places and I haven’t found.

In the same way as the image below. With the text summarized in some 6 lines and "SEE MORE"

I don’t have code yet because I don’t really know where to start. I need tips, information, links, anything that gives me a "north".

Answer 1

Here is a simple template that can help you. If your text has less than 6 lines just vc remove the "Read more"

The technique is to use a Label with a for to the checkbox that is hidden outside the .box. When that checkbox is marked by clicking on label to .box increases and shows the whole content. Like .box is tall max-height it will always adjust with your content, unless it is more than 1000px high, which is something very unlikely, but if you need tb just change this value...

See it working so you understand better. I left the comments in the code to help you

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.box {
	border: 1px solid #000;
	display: flex;
	flex-direction: column;
	margin: 1rem;
/* altura inicial do box, mude aqui o suficiente para mostrar quanto quiser do conteúdo inicial */
	max-height: 200px;
	position: relative;
	padding: 0 1rem 2rem;
	box-sizing: border-box;
	overflow: hidden;
	transition: max-height 500ms;
}
input:checked + .box {
	max-height: 1000px;
	/* hake para fazer o box crescer, o tamanho máximo dele é 1000px ou menosse o conteúdo for menor */
}
.box > label {
	cursor: pointer;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	margin-left: 1rem;
	height: 3rem;
	line-height: 3rem;
	background-image: linear-gradient(to bottom, transparent, #fff 25%);
	color: red;
}
.box > label:hover {
	text-decoration: underline;
}
#ler {
	display: none; 
	/* remove o checkbox da tela */
}

<!-- quando o input for checado o box cresce -->
<input type="checkbox" name="" id="ler" hidden>
<div class="box">
  <div>
    <p>1 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
    <p>2 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
    <p>3 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
    <p>4 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
    <p>5 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
    <p>6 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
    <p>7 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
    <p>8 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
  </div>
  <!-- label para checar o checkbox quando for clicada -->
  <label for="ler">leia mais</label>
</div>