Question 74572 in Html Question posted in
Some basic documentation can be found here.

Trying to show "…" after 110 characters using css – Html

Hi I am having hard to show html and css to show "…" after 110 characters. Thing is width is fixed and height (number of lines) can be multiple as shown picture.enter image description here

Here is the existing html and css code:

<div class="course-preview-body">
  <p class="course-preview-header">{{competency.title}}</p>
  <p class="product-preview-description">{{{competency.overview.statement.text}}}</p>
</div>

.course-preview-body {
    padding: 20px 15px 15px;
    border-bottom-left-radius: 4px;
    font-size: 14px;
    height: 100px;
    .course-preview-header {
      color: #000;
      font-weight: 700;
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .product-preview-description {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

Help me to fix the give code to resolve the issue..

Tags:

3

Answers


  1. 0

    It seems like you use a templating engine. If that’s the case then the easiest way would be to cap the length already in there.

    <p class="product-preview-description">{{competency.overview.statement.text.substring(0, 110) + "..."}}</p>

    This is also good for sending less over-the-wire.

    Login or Signup to reply.
  2. 0

    In CSS, you don’t have the possibility to display the "…" character after the 110th character.

    However, the following options are available:

    1.) You can determine on which line the "…" should appear. (maybe optional with css)

    .product-preview-description {
  overflow: hidden; /* if want ..., then text too long */
  text-overflow: ellipsis; /* if want ..., then text too long */
  display: -webkit-box; /* if want ..., in last row */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* as many lines as you need */
}

    Or…
    2.) You can add the "…" character before the overflow of a text without line breaks at the end of a box, if the text doesn’t fit the full width of the box.

    .course-preview-header {
  max-width: 100%; /* 100% or any value */
  overflow: hidden; /* if want ..., then text too long */
  text-overflow: ellipsis; /* if you want ..., then text too long */
  white-space: nowrap; /* if you need one line, disable row break */
}

    Fixed 110 characters is not a great solution since the number of lines in the description could vary, which is not ideal if you are displaying multiple descriptions in a grid-like layout. It’s better to consistently limit the number of displayed lines to a predefined value.

    If you still insist on using 110 characters, you can truncate the text using Java, Python, PHP, JavaScript, or any other language you are using.

    Example with JavaScript:

    // ~ 200 charachters
const text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet risus velit. Sed euismod lacus nec mauris pellentesque, sed blandit dui congue. Donec blandit, nisi ut tempor interdum, ex mauris mattis odio, vel commodo elit nulla eu enim. Vivamus sit amet risus vel felis semper vulputate. Sed finibus dolor sapien, nec ullamcorper metus dignissim ac. Aliquam sed dapibus neque, id posuere eros. Nullam dignissim lorem id neque accumsan convallis. Etiam molestie erat felis, quis venenatis risus blandit eu. Sed eget eros sit amet augue rutrum dapibus. Sed eleifend lectus non metus consectetur bibendum. Praesent ut risus nec mauris lacinia porttitor. Maecenas ut pulvinar ante. Praesent vel magna eget nisl placerat vehicula.";

// 110 charachters from text
console.log(text.slice(0, 110));
    Login or Signup to reply.
  3. 0

    You have the output of some js variables (looks like Vue.js).
    Css cannot count letters unless you put each one in a tag:

    span:nth-child(11):after {
    content: '...';
}

span:nth-child(n+12) {
    display: none;
}
    <!-- after 11 goes ... -->
<span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span>

    Therefore, it will be simpler like this (аf you don’t create a variable for competency.overview.statement.text):

    {{
competency.overview.statement.text.length > 110 ?
competency.overview.statement.text.slice(0, 110) + '...' : 
competency.overview.statement.text
}}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search