1

Muy buenas, Pues lo dicho, ¿alguien sabe cómo tocar los estilos del texto sin afectar al anchor?

Básicamente, lo que me gustaría sería poner un min-height al texto para que el "read more" no se descuadre.

He buscado pseudo selectores, lo he intentado con el not:, he probado a cambiar el excerpt the wordpress pero no encuentro la forma. Y la verdad me extraña que no haya algún selector css para estos caso.

Aquí tenéis el código:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
labore et do[…]

<a class="read-more" href="http://testing.wholesalenosestuds.com/testin-3/">
Read more
</a>
</p>

Y una imagen también por aquí: introducir la descripción de la imagen aquí

6
  • Que has intentado? A partir de ahí podemos ayudarte
    – user128299
    Commented el 23 jul. 2020 a las 3:33
  • Hola Beta, gracias por tu respuesta. Pues he intentado con un pseudo :not, cambiando el excerpt the wordpress, buscando pseudo selectores que no conozca, etc Commented el 23 jul. 2020 a las 3:36
  • Agrega eso por favor a tu pregunta, es un punto de partida
    – user128299
    Commented el 23 jul. 2020 a las 3:38
  • ok, lo hago ahora mismo Commented el 23 jul. 2020 a las 3:38
  • ¿A qué te refieres con que no se descuadre?, ¿podrías explicar mejor ese punto?, tal vez una imagen ayude a entender el resultado esperado
    – user128299
    Commented el 23 jul. 2020 a las 3:41

4 respuestas 4

1

si estas limitado a esa estructura probaste crear los "read me" con ::before? te dejo un ejemplo para tu caso , espero que te sirva y sino exitos!

 .parrafo{
   width: 300px;
    
   min-height: 100px;
   margin: 2rem;
   border: 1px solid black;
 }
.ancla{
  text-decoration: none;
}
 .ancla::before
 {
   display: block;
   content: 'read me';
   margin: 2rem auto;
   text-align: center;
   color: yellow;
    width: 40%;
    background-color: teal;
    border-radius: 1rem;
 }
  <p class="parrafo">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, quisquam! Vel similique sit tempora nobis beatae veritatis quo! Amet porro, eius fuga fugit unde officia quae provident atque nam distinctio?
        <a href="#" class="ancla"></a>
      </p>

3
  • Mmmm, interesante Facundo. Conozco cómo eliminar el contenido del excerpt por lo que es posible que me sea de ayuda. Cuando esté en la oficina le echo un ojo y te comento Saludos Commented el 23 jul. 2020 a las 14:13
  • Buen planteamiento facundo, pena que no sirva para este caso. Muchas gracias de todos modos Commented el 24 jul. 2020 a las 4:11
  • uh que lastima alvaro , bueno espero que lo puedas aplicar en un futuro para algo que te sirva , saludos!!! Commented el 24 jul. 2020 a las 23:13
0

Te recomiendo usar Grid para dividir el elemento en 3 partes, siendo la tercera el boton de View more, asi la altura de este seria totalmente independiente del tamaño del parrafo, tambien puedes meter esos elementos dentro de un container y hacer que este controle el alto, asi la altura de las columnas siempre seria igual independientemente de cuando texto haya dentro, espero que te sea de ayuda. :)

3
  • Debería usarse la estructura html que planteo en la pregunta que es la que presenta WP. Pero gracias por tu respuesta Commented el 23 jul. 2020 a las 7:03
  • Si pretendes cambiar algo del diseño debes plantear cambiar partes del codigo, tu mismo puedes comprobar que esa estructura no es compatible con lo que pretendes alcanzar, por eso te he recomendado usar Grid, al igual que lo hizo otro usuario por lo que vi, igualmente espero que encuentres solucion.
    – vo1d dev
    Commented el 23 jul. 2020 a las 10:00
  • Genial vo1d dev pero como te he dicho estoy trabajando en wordpress. Si sabes cómo hacer lo que comentas en wordpress sería genial. es un the_excerpt() Commented el 23 jul. 2020 a las 14:03
0

haz intentado con una clase para los 3 botones y colocar a todos en la misma posicion con un absolute?

nota: si mi respuesta no es lo ms profesional es que tambien estoy empezando, solo intento darle alguna solucion

0
0

No me manejo con WordPress, pero a nivel de la maquetación considero que es donde debería existir una modificación en cuanto a las etiquetas HTML que estás usando.

Por otro lado de la manera en que buscas el resultado y basándonos en lo que nos indicas has investigado o tratado pienso que:

  • Al contenedor de tus cards le damos un display grid
  • Le indicamos que genere 3 columnas
  • A los elementos podemos distribuirlos así:
    • Una etiqueta article por cada párrafo (es decir en total 3)
      • A estos 3 elementos le damos un ancho definido
    • A la etiqueta a la colocamos como hermana de la etiqueta article
      • A estos 3 elementos (los enlaces) le indicamos su posición por medio de grid-row

Código:

    <style>
      .galeria {
        border: 1px solid;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin: 0 auto;
        padding: 20px;
        width: 800px;
      }
      .galeria-imagen {
        border: 1px solid;
        width: 250px;
      }
      .enlaceN {
         color: red;
         grid-row: 2;
        text-align: center;
      }
    </style>
    
    <section class="galeria">
      <article class="galeria-imagen">
        <p class="galeria-imagen__parrafo">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione ea nulla vero ad iure hic inventore quasi error voluptatem. Sunt at ea, voluptatem nam culpa delectus, eligendi similique? Quae, unde.
          kjhdfkjshfksdhjfksjhkshjfksjhflorem
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium rem nulla libero commodi, tempora, officiis, necessitatibus, reprehenderit quis deleniti temporibus harum! Qui aperiam officia, laudantium iusto dolorum sequi adipisci ipsum!
        </p>
      </article>
    
          <a href="" class="enlaceN">Leer Mas</a>    </div>
      <article class="galeria-imagen">
        <p class="galeria-imagen__parrafo">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur odit facere, laboriosam doloribus similique earum id. Fuga accusantium dolor quia ex in illum voluptatem! Similique fugit saepe nihil dolorum nostrum.
        </p>
      </article>
     <a href="" class="enlaceN">Leer Mas</a>
      <article class="galeria-imagen">
        <p class="galeria-imagen__parrafo">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem dignissimos alias minus id veritatis pariatur magni, accusantium iusto excepturi odit voluptatem, ipsum ducimus ullam, esse repellat dolor, repellendus et inventore.
        </p>
      </article>
      <a href="" class="enlaceN">Leer Mas</a>
    </section>

Con un resultado así:

introducir la descripción de la imagen aquí

Enlaces de interés

1
  • Debería usarse la estructura html que planteo en la pregunta que es la que presenta WP. Pero gracias por tu respuesta Commented el 23 jul. 2020 a las 7:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.