Question

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

这是我的openmpi: environment: - "affinity:container!=*openmpi*" labels: - "com.myself.name=openmpi"页面：

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

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

我想做什么：

如果文字到达board字段的末尾，则应将其截断
任何事情都不应该破坏表格式（width..etc）

以下是我的title代码（在html中使用）：

django

需要你的帮助。谢谢

修改

以下是我尝试做的事情： 1.我将类命名为{% 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> </div> </div> <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 %}并为其定义truncate：

css

将.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }类添加到我的表中：

truncate

结果是：

Answer 1

您可以尝试这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: