相关疑难解决方法(0)

你如何使用CSS content属性添加html实体？

使用这样的东西只是打印 到屏幕而不是不间断的空间:

.breadcrumbs a:before {
    content: ' ';
}

假设我有一个字符串" 我喜欢大屁股而且我不能说谎 "而且我用它来剪切它overflow:hidden,所以它显示如下:

我喜欢大屁股,我喜欢

切断文字.是否可以像这样显示:

我喜欢大烟头,我喜欢......

用CSS？

请考虑以下示例:( 此处为现场演示)

HTML:

$(function() {
  console.log("width = " + $("td").width());
});

CSS:

td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

输出为:width = 139,并且不显示省略号.

我在这里错过了什么？

我试图在Table标签中实现String省略号.

源代码如下.

<div>
  <div class="widget-body no-padding" style="min-height:0px;">
    <table class="table" style="table-layout: fixed;">
      <tbody>
        <c:forEach var="item" items="${result.stuffList}" varStatus="idx">
          <c:if test="${idx.index < 5}">
            <tr>
              <td class='text-center' style="width: 80%; text-overflow:ellipsis; -o-text-overow: ellipsis; word-wrap:normal; overflow: hidden;">
                <nobr>
                  <a href="#" onclick="javascript:location.href='/view?nid=${item.id}'">${item.name}</a>
                </nobr>
              </td>
              <td class='text-center' style="width: 20%;">
                ${item.regDate}
              </td>
            </tr>
          </c:if>
        </c:forEach>
      </tbody>
    </table>
  </div>
</div>

这段代码有效,如果String太长,它会显示...我的预期.

但是,当我测试响应时,它会变得难看.

我写了以下部分来表达项目注册日期.

但是当浏览器缩小时,它的后部不会出现在屏幕上.

<td class='text-center' style="width: 20%;">
  ${item.regDate}
</td>

如何在所有浏览器中使用Bootstrap中的省略号？

所以它看起来像这样

我所期望的(缩小浏览器时)>>

第1栏/第2栏

AAAA ..../2014-09-24

现在看起来像>>

第1栏/第2栏

AAAA ..../2014-09

问题是>>

在我添加String省略号函数之前,它可以响应.

我的猜测>>

也许table-layout: fixed;风格是原因.但不知道如何实现String省略函数table-layout …

希望有人能提供帮助.

我有3个嵌套的div.父母,孩子和孩子的孩子.

我想要完成的事情(动机不相关)是该孩子根据父母的宽度(百分比)获得相对宽度,并且孩子的孩子必须根据该宽度具有溢出省略号.问题是,如果我在子宽度中使用%,则省略号不起作用,如果我以像素为单位定义宽度,则它可以工作.

这是HTML

<div class="a">
   <div class="b">
        <div class="c">
        Here should go some text long enough to ellipsis the overflow
        </div>
    </div>
</div>

这是非工作的CSS

    .a {
        border:black 1px solid;
        float: left;
        width: 122px;
        display: table;
        line-height: 14px;
    }
    .b {
        width:100%;
        color: black;
        font-size: 14px;
        text-transform: uppercase;
        cursor: pointer;
    }
    .c {
        line-height: 11px;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space:nowrap;
    }

但是,如果我改变b的宽度为122px,它的工作完美(注意122px应该等于100%).

你可以在这里查看:http://jsfiddle.net/vNRpw/4/

谢谢!

我有一些divs与display: table-cell风格,我想设置的固定宽度divs,并截断内,如果它不适合文本.

HTML

<div class="row">
    <div class="cell" style="width:100px;">Should not fit in 100px</div>
</div>

CSS

 .row {
     display: table-row;
}

.cell {
    display: table-cell;
    border: solid 1px #DADADA;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

FIDDLE DEMO

可能吗？

我希望我的表格宽度为100%,并且表格的每一列只占用它所需的空间.如果它溢出,则会出现省略号.

没有表格布局:固定;

html, body {
   margin: 0;
   padding: 0;
   font-family: sans-serif; */
}

.account-products-container .table {
   width: 100%;
   max-width: 100%;
   margin: 20px 0;
   border-collapse: collapse;
   border-spacing: 0;
   display: table;
   table-layout: auto;
}

.account-products-container .table-striped>tbody>tr:nth-of-type(odd) {
   background-color: #eee;
}

.account-products-container .table>thead>tr>th {
   padding: 8px;
   line-height: 1.428571429;
   font-weight: 600;
   text-transform: uppercase;
   vertical-align: bottom;
   border-bottom: 1px solid #DDD;
   text-align: left;
}

.account-products-container .table>tbody>tr>td {
   padding: 8px;
   line-height: 1.428571429;
   vertical-align: top;
   border-top: 1px solid #DDD;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
} …

我在表格中包含文本时遇到问题。我想给它一个text-overflow: ellipsis. 但我似乎无法让它发挥作用。

HTML：

<table class="article-table">
  <thead class="article-table__headers">
    <th>Title</th>
    <th>Source</th>
    <th>Abstract</th>
    <th>Folder</th>
  </thead>
  <% @articles.each do |article| %>
    <tr class="article-table__rows">
      <td><%= article.title %></td>
      <td><%= article.source %></td>
      <td><%= article.abstract %></td>
      <td><%= article.folder %></td>
      <td><%= link_to "Download File", download_article_path(article) %></td>
    </tr>
  <% end %>
</table>

CSS：

.article-table td {
    width: 20%;
    border-bottom: 1px solid #ddd;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
}

但这不起作用。如果文本太长，它仍然会增加 td 的大小

我想在CSS中布局一个表.要求如下:第一列扩展为多,因为它可以和第一列文本被限制为一行文本,如果有更多的,应该有一个省略号.其他列只需要他们需要包含他们的文本不换行(文本换行:NOWRAP)的空间.

桌子本身宽度为100%.

我设法有省略号无论是固定大小的第一列,没有省略号可变大小的第一列,我不能找到一种方法,具有可变大小的列用省略号.用CSS可以实现吗？如果需要,我可以使用CSS 3属性,但我想避免使用JS.

标记:

<table class="table">
<tr>
  <th>First</th>
  <th class="no-wrap">Second</th>
</tr>
<tr>
  <td class="expand-column">
    Some long long text here
  </td>
  <td class="no-wrap">
    Other text
  </td>    
</tr>
</table>

CSS:

.table, .expand-column {
  width: 100%;
}

.no-wrap {
  white-space: nowrap;
}

关于text-overflow: ellipsis在表格单元内进行工作,有几个SO问题.解决方案主要是设置table-layout: fixed.

为什么我不能这样做？好吧,因为我有动态单元格宽度.

http://jsfiddle.net/d7h437he/2/

按钮单元应该"适合内容",复制单元应该采取其余的.这种布局是不可能的,table-layout: fixed因为按钮单元需要指定宽度,我不能,因为它是动态的.

如何截断复制单元格？

注意:"不可能"是一个有效的答案,将被接受.:)

我有一个表,我想知道如何限制<td>条目中显示的字符数,以便如果超过限制,则显示"...",可能允许用户单击它以进行扩展.

<table st-table="displayedCollection" st-safe-src="main.quizCollection" class="table table-striped table-condensed table-bordered" ng-show="main.tab === 'active'">
        <thead>
            <tr>
                <th st-sort="Internal.quizName">Name</th>
                <th st-sort="Internal.description">Description</th>
                <th st-sort="Internal.dateCreated">Date Created</th>
                <th st-sort="Internal.timesTaken">Times Taken</th>
                <th>URL</th>
                <th>View More</th>
                <th>Copy</th>
                <th>Export</th>
                <th>Deactivate</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="quiz in displayedCollection | filter:'active': true">
                <td>{{quiz.Internal.quizName}}</td>
                <td>{{quiz.Internal.description}}</td>
                <td>{{quiz.Internal.dateCreated}}</td>
                <td>{{quiz.Internal.timesTaken}}</td>
                <td><button class="btn btn-default" clip-copy="main.copyURL(quiz)"><i class="fa fa-share-square-o"></i></button></td>
                <td><a href="#/view-more/{{quiz.$id}}" class="btn btn-info"><i class="fa fa-eye"></i></a></td>
                <td><a href="#/copy/{{quiz.$id}}" class="btn btn-default"><i class="fa fa-clipboard"></i></a></td>
                <td><button class="btn btn-default" ng-csv="main.export(quiz)" csv-header="main.csvHeader" lazy-load="true" filename="{{quiz.Internal.quizName}}.csv"><i class="fa fa-floppy-o"></i></button></td>
                <td><button class="btn btn-danger" ng-click="main.deactivate(quiz)"><i class="fa fa-ban"></i></button></td>
            </tr>
        </tbody> …

我有一个100%宽度的表包含几个单元格.我希望其中一个单元格始终在一行中显示其内容,white-space: nowrap并在内容超出表格单元格时在行尾显示省略号text-overflow: ellipsis.

我遇到的问题是,当达到单元格内容时,表格将停止收缩.因此,单元格的最小宽度将始终是其内容的宽度,而表格将作为整体推出.

我只是想不通如何解决这个问题:

我的HTML:

<div class="otrCompactView">
    <div class="otrLastEditTable">
        <div class="otrLastEditRow">
            <div class="otrLastEditor">LastEditor</div>
            <div class="otrLastEdited">LastModified</div>
        </div>
    </div>
    <div class="otrTitleRow otrRow">
        <div class="otrTitle">Title asdasdasdas asd asd asd asdas as asd </div>
    </div>
    <div vlass="otrTaskRow otrRow">
    </div>
    <div class="otrColumnsRow otrRow">
        <div class="otrColumns"></div>
    </div>
</div>

我的CSS:

.otrCompactView {
    display: table;
    background: yellow;
    width: 100%;
    height: 100%;
}

.otrRow {
    display: table-row;
}

.otrLastEditTable {
    display: table;
    width: 100%;
}

.otrLastEditRow {
    display: table-row;
}

.otrLastEditor {
    display: table-cell; …

我有一个带有百分比宽度的列的表格。如果这些单元格中的内容超过该百分比宽度，我希望它被省略号截断。

根据表格单元格中的 CSS 文本溢出？我应该使用 max-width 属性，但根据如何使用百分比设置表格单元格的最大宽度？我不能用百分比来做。

table {
  width: 100%;
}
table td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
table tr td:nth-of-type(1) {
  width: 20%;
}
table tr td:nth-of-type(2) {
  width: 30%;
}
table tr td:nth-of-type(3) {
  width: 50%;
}

<table>

  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>

  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>

</table>

我该如何解决这个问题？