0

Es que estoy tratando de aplicar los puntos suspensivos a un "p" con miltiline, me pone los puntos bien, pero no me desaparece el texto restante, no se que podrá ser, pongo mi código para que por favor me ayuden validando que estoy haciendo mal.

p {
  margin: 0;
  color: #000000;
  font-size: 20px;
  font-family: Arial;
  font-weight: 700;
  padding: 15px;
  height: 110px;
  width: 239px;
  background-color: red;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
<p>
  ¿Cómo pedir turno para la sucursal Física desde Bancolombia app? ¿Cómo pedir turno para la sucursal Física desde Bancolombia app?
</p>

4 respuestas 4

1

Si lo que quieres es que al dar click al punto suspensivo se muestre mas texto este codigo te servira perfecto.

<style>
.parrafo {display:none;}
</style>

Añades el Javascript

function mostrar() {
document.getElementById("mas").style.display = "block";
}

<div class="texto">
<p> Hola soy un texto quieres leer mas sobre mi? <a onclick="mostrar()"><strong>...</strong></a></p>
<p> class="parrafo" id="mas"> Soy el otro texto tio saludame :v </p>
</div>

Espero te sirva.

0
0

Para que text-overflow: ellipsis funcione necesitas dos cosas mas: white-space: nowrap y display: inline-block

p {
  margin: 0;
  color: #000000;
  font-size: 20px;
  font-family: Arial;
  font-weight: 700;
  padding: 15px;
  height: 110px;
  width: 239px;
  background-color: red;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
<p>
  ¿Cómo pedir turno para la sucursal Física desde Bancolombia app? ¿Cómo pedir turno para la sucursal Física desde Bancolombia app?
</p>

1
  • Muchas gracias por tu ayuda, pero el problema es que debe ser multiline (3). el 1 nov. 2018 a las 22:54
0

Hay una solución con CSS, aunque es complejo de entender, es fácil de crear.

Para lograr esto, comprende de las siguientes cosas:

  1. height: altura font-size: tamaño del texto
  2. line-height: altura de una casilla remarcada por líneas
  3. Y las líneas a mostrar

Para lograr esto todos juntos, lo que se me ocurrió y creo que es la única forma, es usar variables.

Por eso dije que es complejo de entender. Las variables se usa para tener una sola declaración para todos lo estilos que quieran usar. Solo edito en un solo lugar, y afecta a todos lo que usan.

Las variables se crea y se usa así:

/* variables para todos */
:root {
  --soyAlto: 1000px;
  --soyRojo: red;
}

p {
  height: var(--soyAlto);
  color: var(--soyRojo);
}

Pero también se puede usar independientemente, para un solo estilo:

p {
  --soyAlto: 1000px;
  --soyRojo: red;
  height: var(--soyAlto);
  color: var(--soyRojo);
}

En el siguiente ejemplo, está la solución a tu pregunta. Para obtener 3 líneas de texto, modifica el número de --lineas.

Lo que pasa en height es un calculo (calc()) de las variables:

--size X --line-height X --lineas.

p {
--size: 16px;
--line-height: 1.5;
--lineas: 3;
--paddingV: .30em;
--paddingH: .30em;

width: 300px;
margin: 0 auto;
background-color: rgba(0, 128, 0, 0.5);

display: block;
display: -webkit-box;
height: calc( var(--size) * var(--padding) * var(--line-height) * var(--lineas));
font-size: var(--size);
line-height: var(--line-height);
-webkit-line-clamp: var(--lineas);
padding: var(--paddingV) var(--paddingH);
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. At rem excepturi perferendis aut aspernatur repudiandae, distinctio veniam! Velit ullam, id odit eos, earum optio cum aliquam eveniet totam accusamus necessitatibus laboriosam labore sed deleniti vero sapiente ex voluptate beatae maxime ipsam expedita quae. Fuga esse, sunt adipisci, hic aut veritatis cumque tempore reiciendis quam, maxime placeat nostrum? Rerum et veritatis mollitia provident dolor debitis temporibus, corporis accusantium maiores iste natus. Velit libero consectetur ipsum quidem? Exercitationem nostrum quidem autem assumenda minus cumque! Itaque illum labore quia voluptatum atque non nam quam molestiae perferendis voluptates pariatur culpa nostrum accusantium, maxime sit.
</p>

Importante Deves modificar juntamente --line-height: 1.5; con --paddingV: .30em; y --paddingH: .30em; para Obtener el tamaño de padding y separación de las líneas. En otras palabras, no modifiques solamente una cosa, sino, todos juntos; porque todos trabajan juntos. Son variables y calculos.

Esta en tu responsabilidad_

1
  • Si esto fue de tu agrado y solucionado tu pregunta, marca mi respuesta como aceptada para que sirva a otros quienes necesite. el 1 abr. 2022 a las 2:55
0

Por si le sirva a alguien https://programmerclick.com/article/668468221/ estas lineas hacen la magia.

div {
 display: -webkit-box;
 overflow: hidden;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
}
2
  • como eres nuevo deberias de tomarte el tiempo para leer las reglas y normas para responder y preguntar. Tienes que dar una explicación no solo poner el codigo y ya.
    – Csharls
    el 1 abr. 2022 a las 1:54
  • 1
    Si bien este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia. Las respuestas que son únicamente un enlace pueden dejar de ser válidas si la página vinculada cambia. - Desde revisión
    – padaleiana
    el 1 abr. 2022 a las 11:21

Tu Respuesta

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

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