white-space和table-layout实现文本过长但只在一行显示（心酸CSS学习路程一）

最新推荐文章于 2023-12-11 16:39:02 发布

andefine

最新推荐文章于 2023-12-11 16:39:02 发布

阅读量595

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/ZFExile/article/details/79568981

版权

在手机端页面设计中，通过设置table-layout为fixed和white-space为nowrap，配合text-overflow: ellipsis，可以实现无论文本长度如何，都限制为一行显示并隐藏多余内容，避免横向滚动条的出现。

摘要由CSDN通过智能技术生成

1.当前效果
这里写图片描述
代码如下（使用了bootstrap，不影响）

<div class="container">
    <div class="row">
        <table class="table">
            <thead>
                <tr>
                    <th>新闻&amp;通知<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

andefine

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

a-table设置单元格宽度，超出自动换行附效果图

a_靖的博客

05-30

5755

示例效果：设置 a-table 中 columns 的指定单元格属性，通过插槽实现文本超出指定宽度自动换行 { title: '描述', align: "center", scopedSlots: { customRender: 'description' } }, html <span slot.

使用white-space来阻止文字显示自动换行

12-13

当文字很长的时，不管是IE还是firefox，到达边界都会自动换行。但是有的情况，我们并不希望这样。比如：在网页中的某个区域显示一个使用ul li 标签的文章标题列表。不想让每行的文字自动换行，那就可以用css属性white-space来解决。代码如下： CSS Code复制内容到剪贴板 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww

参与评论您还未登录，请先登录后发表或查看评论

顽固TABLEのtable-layout/white-space

cpsl26415的博客

04-26

101

进军web时，虽然布局已弃传统table布局，但是需要数据量很大体现的时候仍需要table。fixed ：固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。　 ...

el-table中表格内容换行显示white-space属性

qq_34420739的博客

03-11

1287

实现效果：一、表格内容加上’\n’ address: "上海市普陀区\n金沙江路 1518 弄", 二、添加表格样式 .el-table .cell{ white-space: pre-line; }

html table space,html – white-space：nowrap中断显示：table

weixin_36212334的博客

06-11

347

我快要疯了.我使用搜索和谷歌,但无法想出一个解决方案,它将无法正常工作:(我有一个div嵌套在其他div中自动垂直居中和背景.最初它垂直适合几个图像并动态调整大小.我根据图片的数量(宽度,填充)使用几种CSS样式.但对于这个画廊我需要很多图片,原始布局分成几行,但我想要一个嵌套的“white-space：nowrap”with overflow-x：auto;在我的div.所以我可以滚动它们,但是...

html th table-fixed,CSS技巧：table-layout: fixed固定表格局

weixin_30445963的博客

06-18

717

CSS技巧：table-layout: fixed固定表格局让表table布局更加符合预期，普通使用table时，其table-layout默认值是auto，导致表格第二行和第一行不一样宽，也就是两行的宽度不对齐。而使用：table { table-layout: fixed; }则会让表的布局以第一行为准，设置表格的宽度，然后其他行的表格宽度就按照第一行为准。一般表格第一行是表头标题...

CSS-通过css来实现单行或者多行文本移除显示省略号('...')

wust_cyl的博客

05-17

3628

单行文本：我们看一下如下效果这种情况随处可见，实现起来也很简单。 <p> 友情，能够随时说话找一个能随时随地和你聊天的人真的很难。 </p>p{ width:10em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }多行文本...

ant-design中a-table中文字字数过长时显示tooltip

qq_37984232的博客

03-02

2242

文字过长时是否显示tooltip

white-space属性的normal值和nowrap值的区别

qq_44329870的博客

11-06

7238

white-space属性 normal：默认对文本的处理方式，文本自动处理换行，到达容器边界的内容会自动转到下一行。 nowrap：强制在同一行内显示所有文本，直到文本结束或者文本后面有标签。举例代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .w

CSS 文字溢出 text-overflow，word-break，word-wrap，white-space

Star丶Xing

05-06

4622

1. 什么是单词（word ）英文的单词我们都知道，空格分开的都是一个个单词，中文的单词在浏览器中指的一个字。下面是一个浏览器判定单词的例子：中文 //2 个单词 Hello world //2 个单词 Helloworld //1 个单词 2. word-wrap 和 word-break word-wrap 值描述 normal 只在允许的断字点换行（浏览器保持默...

表格设置table-layout:fixed后对单元格宽度设置无效

09-25

在对设置表格设置table-layer:fixed样式后，发现表格中有一行合并过，其它没有合并的行的列宽会平均化，对列宽的设置会失效，下面有详细的解决方法，大家可以学习学习

利用CSS属性white-space实现el-table表头文字换行

weixin_45725778的博客

06-01

592

white-space CSS 属性是用来设置如何处理元素中的空白。

html whitespace属性,不简单的 white-space 属性

weixin_33467546的博客

06-07

3201

white-space 是 CSS 的属性。从字面上来看，这是一个与空白相关的属性。好像也没啥东西，但从其实没那么简单。详细介绍white-space 属性可以包括以下 3 个方面内容1 如何处理文本内容中的多个空格和 Tab？策略1: 折叠。如果多个空格和 Tab 在文本内容中间，则合成一个空格；如果在文本内容开头，则忽略。如A bunch of 此处有Tab words you see...

关于ElementUI 中Layout 布局不能换行的解决方案

New前端工厂的博客

08-23

4106

<div class="info-card" v-for="(i,inx) in Farea.length/4" :key="inx"> <el-row :gutter="24" > <el-col :span="6" v-for="(item,index) in Fareas(inx)" :key="index"> <div class="boxs"> .

css设置表格自动换行;table换行无效

hua_ban_yu的博客

12-01

6198

在前端table制作中，由于使用了一些插件导致table无法自动换行，智能手动为标签添加换行样式。表格换行代码： td{ white-space: inherit; word-wrap: break-word; word-break: break-all; }

HTML 表格滚动锁定表头，实现固定行列

最新发布

dongfangxinding的博客

12-11

3163

sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置。主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。fixed - 表格的总宽度决定于表格width的定义,以及各栏位（column）width的定义。

CSS white-space 属性

zju_ly的专栏

09-14

760

用css固定表格(table)或div的宽度用css固定表格(table)或div的宽度,不随内容的增多而加宽: 有时候在table或div中显示文字的时候，如果是汉字，文章会根据table和div的width属性自动分行，但如果是英文，当单词长度超过table或div宽度

表格中的table-layout属性讲解

Andrew_Chenwq的博客

03-09

1241

tableLayout 属性用来显示表格单元格、行、列的算法规则。table-layout有三个属性值：auto、fixed、inherit。

table-layout的fixed属性 white-space： nowrap

daiquan_xu的专栏

04-26

1335

或许你已经Google到white-space： nowrap可以实现nobr，不错，但关键还有一个，那就是table-layout. table-layout有两个值可以设定，预设的是auto. auto：默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢。　　　fixed ：固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框

CSS技巧：在IE6,IE7中实现white-space:pre-wrap

`white-space:pre-wrap`的特性在于它不仅保留了所有的空白字符（空格、制表符和换行符），而且允许内容在必要时自动换行，这在显示代码样例或者保留段落原有格式时非常有用。与之相反，`white-space:pre`虽然也保留...