I currently have <p>{{event.desc}}</p> which gives the entire description of the event.
Some have very long description, and i only want, say, the first 50 characters.
How can this be achieved?
Asked
Active
Viewed 1.5k times
3
-
1substr() - http://php.net/manual/bg/function.substr.php – Ivanka Todorova Dec 11 '17 at 20:43
-
are you using angularjs? if so, check this https://docs.angularjs.org/api/ng/filter/limitTo – Charlie Ng Dec 11 '17 at 20:44
-
I'm not using php. Is there not a HTML & CSS solution? – Sid Jones Dec 11 '17 at 20:44
-
Using CSS, you can specify a max width and height for your paragraph, then you can use the CSS property [`text-overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) to cut off the text. – Sidney Dec 11 '17 at 20:48
-
1Possible duplicate of [Character Limit in HTML](https://stackoverflow.com/questions/113376/character-limit-in-html) – jmargolisvt Dec 11 '17 at 20:48
-
That's text input, I want it for a paragraph – Sid Jones Dec 11 '17 at 20:50
2 Answers
5
Try this:
.fifty-chars {
width: 50ch;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}<p class="fifty-chars">Short event description</p>
<p class="fifty-chars">Long long long long long long long long long
long long long long long long long long long long long long long
long event description</p>
Pierre François
- 5,850
- 1
- 17
- 38
-
I added one line of code in the CSS: `text-overflow: ellipsis;` which will give better optical results than a string truncated abruptly. – Pierre François Dec 12 '17 at 12:04
0
in PHP
<?php
if (strlen($myString) > 20) {
echo substr($myString, 0, 20) . '...';
} else {
echo $myString;
}
?>
Ali Sheykhi
- 95
- 11