文本溢出:省略号和显示表格单元

伯恩哈德

我正在尝试创建具有2列的CSS表(宽度100%)。第一列具有固定的宽度(例如180像素),第二列应填充其余的宽度。

在第二列内,有一个长文本(在<p>-Tag内)。现在,我想用来text-overflow: ellipsis将文本裁剪为一行,并且文本应与可用空间一样长。

那就是我尝试过的:

<div class="container">
    <div class="card">
        <div class="card-i">
            ABCD
        </div>
        <div class="card-r">
            <strong>Some title</strong><br>

            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>  
    </div>
</div>

以及以下CSS代码:

// This container is just for testing
.container {
    width: 400px;
    margin-bottom: 10px;
}
.card {
    display: table;
    width: 100%;
    border: 1px solid #CCC;
}

.card-i, .card-r {
    display: table-cell;
    vertical-align: top;
    padding: 0;
    border: 1px solid #CCC;
}
.card-i {
    width: 180px;
}
.card-r {
    position: relative;
    padding: 0 15px;
}

p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}
G-西里尔

表格格式显示基本上可以让元素根据其拥有的内容进行收缩/扩展,因此heightwidth工作方式类似于min-heightmin-width

table-layout:fixed;可以强制width这样display为行动widthheight将继续扩大,无论如何。

.container {
    width: 400px;
    margin-bottom: 10px;
}
.card {
    display: table;
    width: 100%;
    border: 1px solid #CCC;
  table-layout:fixed;
}

.card-i, .card-r {
    display: table-cell;
    vertical-align: top;
    padding: 0;
    border: 1px solid #CCC;
}
.card-i {
    width: 180px;
}
.card-r {
    position: relative;
    padding: 0 15px;
}

p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}
<div class="container">
    <div class="card">
        <div class="card-i">
            ABCD
        </div>
        <div class="card-r">
            <strong>Some title</strong><br>

            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>  
    </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

滚动时文本溢出省略号未在Chrome和IE中显示溢出内容

来自分类Dev

文本溢出:省略号显示不同的字符

来自分类Dev

CSS 文本溢出省略号无法正确显示

来自分类Dev

表格单元格上的文本溢出省略号在IE8和IE9中不起作用

来自分类Dev

文本溢出:省略号不被尊重

来自分类Dev

文字溢出:省略号;不截断溢出文本并给出省略号

来自分类Dev

溢出问题:隐藏和文本溢出:省略号

来自分类Dev

文本溢出省略号未以某些自定义字体显示

来自分类Dev

在表格单元格内的流体div中将文本截断为省略号

来自分类Dev

在表格单元格内的流体div中将文本截断为省略号

来自分类Dev

PyQt / Qt,带有自定义委托的tableview,用于使用省略号来显示文本溢出单元格

来自分类Dev

文本溢出省略号和flex在Firefox上不起作用

来自分类Dev

块级元素是否支持文本溢出:省略号

来自分类Dev

Flexbox和文本溢出:省略号混合使用吗?

来自分类Dev

设置“文本溢出:省略号”的点颜色

来自分类Dev

列表项的文本溢出省略号并保留数字

来自分类Dev

CSS“文本溢出:省略号”,并将元素垂直居中

来自分类Dev

Flexbox和文本溢出:省略号混合使用吗?

来自分类Dev

具有多个跨度的文本溢出省略号

来自分类Dev

文本溢出省略号不受位置影响:相对

来自分类Dev

不能使文本溢出作为省略号

来自分类Dev

css。文本溢出不起作用:省略号

来自分类Dev

如何用省略号截断长文本,但总是在省略号后显示图标

来自分类Dev

div容器中的表格布局和省略号

来自分类Dev

带有文本省略号的表格单元中的contenteditable div在IE11中不起作用

来自分类Dev

在 Chrome 和 Safari 下一行的列表项中使用文本溢出省略号链接

来自分类Dev

XSLT修剪文本长度并显示省略号

来自分类Dev

省略号并在单行中显示多行文本

来自分类Dev

在右侧显示省略号并将文本向右对齐

Related 相关文章

  1. 1

    滚动时文本溢出省略号未在Chrome和IE中显示溢出内容

  2. 2

    文本溢出:省略号显示不同的字符

  3. 3

    CSS 文本溢出省略号无法正确显示

  4. 4

    表格单元格上的文本溢出省略号在IE8和IE9中不起作用

  5. 5

    文本溢出:省略号不被尊重

  6. 6

    文字溢出:省略号;不截断溢出文本并给出省略号

  7. 7

    溢出问题:隐藏和文本溢出:省略号

  8. 8

    文本溢出省略号未以某些自定义字体显示

  9. 9

    在表格单元格内的流体div中将文本截断为省略号

  10. 10

    在表格单元格内的流体div中将文本截断为省略号

  11. 11

    PyQt / Qt,带有自定义委托的tableview,用于使用省略号来显示文本溢出单元格

  12. 12

    文本溢出省略号和flex在Firefox上不起作用

  13. 13

    块级元素是否支持文本溢出:省略号

  14. 14

    Flexbox和文本溢出:省略号混合使用吗?

  15. 15

    设置“文本溢出:省略号”的点颜色

  16. 16

    列表项的文本溢出省略号并保留数字

  17. 17

    CSS“文本溢出:省略号”,并将元素垂直居中

  18. 18

    Flexbox和文本溢出:省略号混合使用吗?

  19. 19

    具有多个跨度的文本溢出省略号

  20. 20

    文本溢出省略号不受位置影响:相对

  21. 21

    不能使文本溢出作为省略号

  22. 22

    css。文本溢出不起作用:省略号

  23. 23

    如何用省略号截断长文本,但总是在省略号后显示图标

  24. 24

    div容器中的表格布局和省略号

  25. 25

    带有文本省略号的表格单元中的contenteditable div在IE11中不起作用

  26. 26

    在 Chrome 和 Safari 下一行的列表项中使用文本溢出省略号链接

  27. 27

    XSLT修剪文本长度并显示省略号

  28. 28

    省略号并在单行中显示多行文本

  29. 29

    在右侧显示省略号并将文本向右对齐

热门标签

归档