HTML table truncate text but fit as much as possible

Question

I find some posts in Stack Overflow but it doesn't work for me. I need some specific help.

This is my board page :

When I type long title post, it looks like this :

As you can see here, it ruins each table cell's width, as well as text not being truncated.\

What I want to do :

If text reaches the end of title field, it should be truncated
Anything should not ruin the table format (width..etc)

Here is my html code (used in django):

{% extends 'chacha_dabang/skeleton/base.html' %}

{% block content %}
    <div class="container inner">
        <div class="row">
            <div class="col-md-8 col-sm-9 center-block text-center">
                <header>
                    <h1> 차차다방 게시판 </h1>
                    <p> 회원들의 게시글을 볼 수 있는 페이지 입니다.</p>
                </header>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container -->

    <div class="container inner-bottom">
        <div class="table-responsive">
            <table class="table">
                <col width="65%">
                <col width="15%">
                <col width="13%">
                <col width="7%">
                <thead>
                    <tr>
                        <th>제 목</th>
                        <th>작성자</th>
                        <th>작성일</th>
                        <th>조회수</th>
                    </tr>
                </thead>
                <tbody>
                    {% for post in posts %}
                    <tr>
                        <td class="td-title-area"> <a href="{{ post.get_absolute_url }}" class="td-title"> {{ post.title}} </a></td>
                        <td> {{post.author}} </td>
                        <td> {{post.created_at|date:"SHORT_DATE_FORMAT"}} </td>
                        <td> 11 </td>
                    </tr>
                    {% endfor%}
              </tbody>
            </table>
        </div>

        <br>
        <br>

        {% if is_paginated %}
        <div class="pagination text-center" style="position:center;">
            <span class="page-links">
                {% if page_obj.has_previous %}
                    <a href="{% url 'posts:list' %}?page={{ page_obj.previous_page_number }}">previous</a>
                {% endif %}
                <span class="page-current">
                    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
                </span>
                {% if page_obj.has_next %}
                    <a href="{% url 'posts:list' %}?page={{ page_obj.next_page_number }}">next</a>
                {% endif %}
            </span>
        </div>
        {% endif %}
    </div>

{% endblock %}

Need your helps. Thanks

Edit

Here is what I'm trying to do : 1. I made class named truncate and define css for it :

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

And add truncate class to my table :

<tbody>
    {% for post in posts %}
    <tr>
        <td class="td-title-area">
            <a href="{{ post.get_absolute_url }}" class="td-title truncate">   
                {{ post.title}}
            </a>
        </td>
        <td> {{post.author}} </td>
        <td> {{post.created_at|date:"SHORT_DATE_FORMAT"}} </td>
        <td> 11 </td>
    </tr>
    {% endfor%}
</tbody>

And result is :

refer this link: http://stackoverflow.com/questions/5239758/css-truncate-table-cells-but-fit-as-much-as-possible — chirag, Aug 24 '16 at 05:56

brian treese · Accepted Answer · 2016-08-24T06:23:55.307

You could try something like this:

    .td-title-area {
      position: relative;
    }

    .td-title-area a {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

<table class="table">
                <col width="65%">
                <col width="15%">
                <col width="13%">
                <col width="7%">
                <thead>
                    <tr>
                        <th>제 목</th>
                        <th>작성자</th>
                        <th>작성일</th>
                        <th>조회수</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="td-title-area"> <a href="" class="td-title"> sdkjghbdslkjgbshdfjgbsdfjkhgbsdfjkghbsdgsdfhjkgbsdfkjhgbsdfkhjgbsdfkjghbsfdkjhg </a></td>
                        <td> author </td>
                        <td> date </td>
                        <td> 11 </td>
                    </tr>
                  <tr>
                        <td class="td-title-area"> <a href="" class="td-title"> sdkjg </a></td>
                        <td> author </td>
                        <td> date </td>
                        <td> 11 </td>
                    </tr>
                  </tbody>
                </table>

It works well! Did you see my edit part? Only difference is `position`. I can't clearly understand why it depends on the `position` . — user3595632, Aug 24 '16 at 06:12
I changed the example and now it has a shorter title in the example, looks like it still works unless I'm misunderstanding you. The positioning takes it out of the flow of the document so that the content does not control the width of the cell. — brian treese, Aug 24 '16 at 06:25
oh yeah it works. That was my mistake.. I was defining `text-align:center` for `td` somewhere in `css`. Thanks :) — user3595632, Aug 24 '16 at 06:29

HTML table truncate text but fit as much as possible

1 Answers1