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

Question

我在堆栈溢出中找到一些帖子，但它不适用于我。我需要一些特定的帮助。

这是我的board页：

当我键入长标题后，它看起来像这样：

正如你可以在这里看到，它破坏每个表格单元格的宽度，以及。文字不被截断\

我想要做什么：

1. 如果文本到达title场结束时，它应该是截断
2. 什么不应该毁了表格式（width..etc）

这里是（在django使用）我html代码：

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