HTML 表格截断文本但尽可能适合

Question

我在 Stack Overflow 中找到了一些帖子，但它对我不起作用。我需要一些具体的帮助。

这是我的 board 页面:

当我输入长标题帖子时，它看起来像这样:

正如您在这里看到的，它破坏了每个表格单元格的宽度，以及未被截断的文本。\

我想做什么:

1. 如果文本到达 title 字段的末尾，则应将其截断
2. 任何东西都不应破坏表格格式(宽度..等)

这是我的 html 代码(在 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 %}

需要您的帮助。谢谢

编辑

这是我正在尝试做的事情:1. 我创建了名为 truncate 的类并为其定义了 css :

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

然后将 truncate 类添加到我的表中:

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

结果是:

Answer 1

你可以尝试这样的事情:

    .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>