I can not apply the ellipses well with CSS

Question

I can not apply the ellipses well with CSS

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Is that I'm trying to apply the ellipses to a "p" with miltiline, I put the points well, but I do not disappear the remaining text, I do not know what it may be, I put my code so please help me by validating what am I doing wrong.

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>

html5 html css3 css

asked by Jhojan Guerrero 01.11.2018 в 23:35

source

2 answers

Jsp does not recognize Javascript files Pass parameters from a view to a controller using href in Visual Studio

score 1 · Answer 1

If what you want is that by clicking on the ellipsis it will show more text, this code will serve you perfect.

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

You add 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>

I hope it serves you.

score 0 · Answer 2

For text-overflow: ellipsis to work, you need two more things: white-space: nowrap and 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>