`

表格中文字过长点点点自适应显示

阅读更多

    这是实际项目中测试提的一个bug,当改变浏览器大小时,里面的文字能自适应td这个单元格出现点点点省略。当浏览器拉长,td随之变长足够显示下文字时,点点点消失。

 

  dom结构: 

<td>
   <a href="" class="ell company">这是一段很长很长很长很长很长很长很长很长很长很长的文字</a>
</td>

 

  处理文字过长点点点显示,传统方式为:

    

.ell{
   width:200px;        /*定宽*/
   white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

  既然是定宽那么就不能自适应了,但是表格是自适应的,不能加上:table-layout:fixed;所以就出现了上面的bug。

 

  解决方式:

  给<td>加上:

 

overflow: hidden;
text-overflow: ellipsis;

 

  <a>为行内元素不变,不能设置为块级元素,这样a的宽度就是文字的长度了。

 

white-space: nowrap;

 

  • 大小: 35.6 KB
分享到:
评论

相关推荐

    易语言高级表格自适应缩放

    - **条件判断**:用于设定缩放的上下限,防止表格过大或过小。 通过深入理解这些概念和技术,开发者可以构建出具有优秀用户体验的易语言应用,特别是在数据管理和展示方面,高级表格自适应缩放将极大地提升程序的...

    html表格头部固定 相应单元格宽度自适应内容区域单元格

    此外,为了实现响应式设计,确保在不同设备和窗口尺寸下表格仍能良好显示,可以使用媒体查询(media queries)来调整特定宽度下的样式。例如,当屏幕宽度小于某个值时,可以将固定表头变为滚动表头,以优化移动端的...

    数据表格JqGrid自适应列宽度

    本文将深入探讨“数据表格JqGrid自适应列宽度”这一主题,以帮助开发者更好地理解和实现这一功能。 首先,JqGrid允许用户根据屏幕尺寸或窗口大小自动调整列宽,以优化用户体验。这种自适应性是现代Web应用中必不可...

    易语言高级表格自适应缩放源码

    在这个“易语言高级表格自适应缩放源码”中,我们可以看到易语言在处理表格显示和用户界面适配方面的应用。 在用户界面设计中,表格是一种常见的数据展示方式,它能够清晰地组织和排列大量信息。而自适应缩放技术则...

    自适应表格,适用于PC,手机同一页面

    描述中的“并不是表格缩小而已,而会自动把结构调整为该设备最佳显示效果”进一步强调了自适应设计的复杂性和智能性。设计师需要考虑如何在有限的空间内最大化信息的可读性和可用性,同时保持数据的清晰性和可理解性...

    RDLC 报表自适应

    2. **宽度自适应**:在RDLC报表中,可以通过设置单元格、表格或控件的“CanGrow”和“CanShrink”属性来实现宽度的自适应。这两个属性允许单元格或控件根据内容自动扩展或收缩。当内容过多时,“CanGrow”会使单元格...

    jqGrid的自适应表格

    当单元格数据过长时,jqGrid提供了一些策略来优化显示。例如,可以设置`maxColWidth`限制列的最大宽度,或者启用`cellLayout`属性来设定单元格的内边距,以确保数据不会溢出。此外,还可以使用`autoResizable: true`...

    个性化Select,长宽可自适应

    在网页设计中,用户体验往往起到决定性的作用,而Select元素是网页表单中常见的交互组件,用于用户选择预设的选项。本知识点将详细介绍如何实现一个个性化、长宽可自适应的Select下拉菜单,以及涉及到的核心CSS技术...

    pyecharts自适应居中显示

    修改python安装目录下,\Lib\site-packages\pyecharts\render\templates文件夹里的macro和simple_chart.html 适配生成的html居中显示并自适应浏览器窗口

    SWT表格管理类(包括表头排序,隔行颜色,表格宽度自适应)

    SWT表格管理类,包括表头排序事件,table宽度自适应事件,隔行颜色事件

    Excel插件,合并表格,汇总表格,合并报表,合并单元格自适应调整行高,批量删除工作表,单位转换等功能

    打印调整:合并单元格自适应:选中区域,可自动调整区域中合并单元格的大小以自适应文本。 调整行高:可在原来的基础上加减一定的行高,可避免自动调整行高后,打印时文字压线。 汇总: 汇总本表数据:选中本表...

    Vue 自适应高度表格的实现方法

    在Vue中实现自适应高度的表格是一项常见的需求,尤其是在处理大量数据时,保持页面布局整洁,避免全局滚动条出现,是提升用户体验的关键。本文将详细介绍如何在Vue项目中,特别是在使用Element-UI库的情况下,实现...

    解决Layui 表格自适应高度的问题

    成功解决问题,不要在field中添加高度,可以自行设置宽度,这样就可以让表格自适应高度了~! 以上这篇解决Layui 表格自适应高度的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持...

    文字识别中的图象自适应预处理

    ### 文字识别中的图像自适应预处理 #### 一、引言 随着计算机技术的发展,文字识别技术在诸多领域得到了广泛的应用。为了提高文字识别的准确性,预处理环节显得尤为重要。传统的文字识别技术主要集中在印刷文字的...

    自适应Table表格样式代码.zip

    JavaScript在表格中可以发挥重要作用,例如,通过添加事件监听器来实现点击表格行时的高亮显示,或者在鼠标悬停时显示额外信息。压缩包内的"jiaoben6108"可能是一个JavaScript文件,包含了这些交互效果的实现。 ...

    C#利用GDI+给图片添加文字(文字自适应矩形区域)

    C#利用GDI+给图片添加文字(文字自适应矩形区域) 本篇文章主要介绍了使用C#语言通过GDI+库给图片添加文字,并使文字自适应矩形区域的相关技术。该技术对图片编辑和处理具有重要的参考价值。 知识点1:GDI+的应用 ...

    一列自适应一列自适应

    一列自适应一列自适应一列自适应一列自适应一列自适应一列自适应一列自适应一列自适应一列自适应一列自适应一列自适应一列自适应一列自适应一列自适应

    Jquery图片自适应宽度和表格List自适应屏幕宽度!

    在网页设计中,让元素能够自适应不同屏幕尺寸是至关重要的,这有助于提供更好的用户体验,尤其是在移动设备上。本文将详细讲解如何使用JQuery实现图片的自适应宽度以及表格List的自适应屏幕宽度。 首先,让我们关注...

Global site tag (gtag.js) - Google Analytics