Truncate CSS text

Navigation
-3

Good I have a text inside a label p that takes a lot.

I would like to know if you can "truncate" at a specific point.

Assuming that it is a text of 10 lines, I would like to cut it 4 four lines and add a button (this last I know how to do it) to redirect to another page where all the information is

edit:

I have a block < p > with ten lines of text that I deviate from a custom field (it is a description) when showing it the text that it teaches is very long for the width it has (I can not increase the width because it is a carrousel). The question is this text that I have excessively long can be cut to 3-4 lines?

    
asked by Caldeiro 03.09.2018 в 12:13
source

4 answers

0

I take the variable where I save the text, I count the amount of characters it has. ex: strlen ($ description) this gives me "100 characters".

I multiply that amount by 0.4 I want 40% of the total characters.

Finally with substr ($ description, 0, $ number_characters_to_show), I cut the length of the text by 80%.

Using PHP this is the code that I want 

$descripcion_caso = $casoexitoespecifico["descripcion"];
$cantidad_caracteres = strlen($descripcion_caso) * 0.4;
$descripcion_caso_breve = substr($descripcion_caso,0, $cantidad_caracteres);
    
answered by 03.09.2018 / 12:40
source
1

For what you propose, what I have always done is to cut the text with a certain extension on the server side, either counting words or better characters, controlling later that a word is not shown to "medias" at the end of the text that you get.

The problem comes from the concretion of having to show 4 lines. I suppose that the design of your page is going to be responsive (it should be), then if you have a text with a certain extension, you will have to adjust both the size of the text container and the font to have those 4 lines in different resolutions, from there you can put a box superimposed with the button and render it only if the text is too long (and therefore you had to adjust it).

If the width of the text is fixed, simply cut the text too long and put the paragraph in a div adjusting the size of the text to the maximum width required.

Greetings.

    
answered by 03.09.2018 в 13:08
1

you could also do it simply from the css side by adding a class to the description, example: 

.resumen{
  height: 100px;
  overflow: hidden;
   background-image: linear-gradient(to top, rgba(150,150, 150, 0) 0%, rgba(150, 150, 150, 0.1) 0px, rgba(200,200,200,0.01) 100px, rgba(200,200,200,0.1) 100%)
}
<html>

  <body>
    <label> descripcion: </label>
    <p class="resumen">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et </p><a href="#">Leer mas</a>
  </body>
</html>

Or something like that :)

    
answered by 03.09.2018 в 16:09
0

Look at this function do it per word 

function tokenTruncate($string, $your_desired_width) {
  $parts = preg_split('/([\s\n\r]+)/', $string, null, PREG_SPLIT_DELIM_CAPTURE);
  $parts_count = count($parts);

  $length = 0;
  $last_part = 0;
  for (; $last_part < $parts_count; ++$last_part) {
    $length += strlen($parts[$last_part]);
    if ($length > $your_desired_width) { break; }
  }

  return implode(array_slice($parts, 0, $last_part));
}

Greetings:)

    
answered by 03.09.2018 в 12:47
HTML Currency Converter What is ReactJs used for? [closed]