`
天边一朵雲
  • 浏览: 36176 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

div&td超出部分省略号表示

    博客分类:
  • HTML
阅读更多

前提是div宽度和table宽度固定

代码:

 

<style>  
div.wid{ 
    width:300px;
    white-space:nowrap;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    overflow: hidden;
 }  
 .tab {
 	width : 300px;
 }
 </style>  
<div class="wid">this is a very long centence.............................................end</div>
<table border="0" style="table-layout:fixed" class="tab">
	<tr>
		<td width="100" style="overflow:hidden;text-overflow:ellipsis">this is a very long centence.............................................end
		</td>
		<td width="100" style="overflow:hidden;text-overflow:ellipsis">this is a very long centence.............................................end
		</td>
		<td width="100" style="overflow:hidden;text-overflow:ellipsis">this is a very long centence.............................................end
		</td>
	</tr>
</table>


分享到:
评论

相关推荐

    html中的div、td 、p 等容器内强制换行和不换行的实现

    当希望文本在容器内不换行且超出部分以省略号表示时,可以使用以下CSS样式: ```css div { width: 100px; /* 容器宽度 */ overflow: hidden; /* 隐藏超出部分 */ white-space: nowrap; /* 不允许文本换行 */ ...

    JQuery 控制内容长度超出规定长度显示省略号

    例如,`&lt;div class="displayPart" displayLength="40"&gt;`表示当文本长度超过40个字符时,将文本截断并显示省略号。 需要注意的是,在上述代码的实现中,对于双字节字符的处理方式是通过计数器进行的,这种方法对于...

    table 中,如何使得单元格的内容不换行,单元格不被撑开,显示不下的时候在结尾处显示“...”

    在网页设计中,经常需要处理表格(table)的布局问题,特别是当单元格(cell)内的文本内容过长时,如何保持单元格的固定宽度,不让内容换行,并在显示不下的情况下添加省略号("...")表示内容被截断。这涉及到CSS...

    解决layui表格内文本超出隐藏的问题

    例如,默认情况下,如果文本太长,那么超出单元格的部分会自动隐藏,表现为省略号。 要解决文本超出隐藏的问题,可以对`.layui-table-cell`的样式进行如下调整: 1. `height:auto;` 这条规则将单元格高度设置为...

    Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法

    在本文中,我们将深入探讨如何使用Layer.js库来实现表格中溢出内容的省略号显示,并在鼠标悬停时显示全部内容。Layer.js是一个强大的弹层组件,它提供了丰富的功能,包括弹窗、提示、加载层等。在这个场景中,我们将...

    CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

    - 这样设置后,如果 `#div1` 元素内的文本长度超过了元素的宽度,文本将会被隐藏,超出部分以省略号代替。 3. 对于表格中的文本溢出处理: - 表格中的文本溢出可以通过类似的方法处理,但需要注意 `table-layout`...

    通过css样式控制单元格文本超长省略.doc

    `overflow: hidden`属性用于隐藏超出部分的文本,而`text-overflow: ellipsis`则告诉浏览器使用省略号来表示被截断的文本。`&lt;nobr&gt;`标签用于阻止文本换行,确保所有文本都在同一行内。同时,我们还添加了一个`title`...

    css实现不再让内容把td撑开的常用解决方法

    通过这种方式,即使单元格中的内容很长,也不会再把单元格撑开,而是保持设定的宽度,超出部分的内容会被隐藏并显示省略号。这个解决方案在处理长文本或者不确定内容长度的情况下非常实用,可以有效地保持表格的整洁...

    div+css公共属性

    13. `overflow`: 控制内容溢出的处理方式,如`.trim`使用`overflow:hidden`和`text-overflow:ellipsis`实现文本超出部分显示省略号。 14. `padding`: 设置元素的内边距,如`.p`设置了上下内边距,`.p img.left`和`....

    layui表格内容溢出的解决方法

    总之,通过上述设置,当表格中的内容宽度超出单元格宽度时,超出部分将不会显示,而是被隐藏起来,并以省略号的形式提示用户有内容被隐藏。这种方法不仅提高了表格的可视性,也优化了用户的阅读体验。对于使用layui...

    CSS+DIV编写经验总结之CSS样式小模板

    - **作用**:当内容超出容器宽度时,自动隐藏超出部分并显示省略号。 - **应用场景**:适用于导航栏、列表项等需要限制文字长度的场景。 #### 总结 通过以上对CSS+DIV编写经验总结之CSS样式小模板的解析可以看出...

    div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...

    当内容在容器内宽度不足以完整显示时,浏览器默认会将文字换行,但是有些时候我们不希望文字进行换行显示,而是希望超出容器宽度的部分不显示或者使用省略号来代替。对于这类需求,可以通过CSS来实现。 在CSS中,...

    通过css样式控制单元格文本超长省略

    这样的代码结构可以确保单元格中的文本在固定宽度内显示,超出部分用省略号表示,并且提供完整的文本信息供用户查看。这种技术广泛应用于表格、列表以及其他需要限制文本长度的场景,有助于提升页面的可读性和美观性...

    使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部

    对于名称,我们使用了条件渲染(v-if)来判断是否显示省略号。当鼠标悬停在名称上时,触发`mouseenterHander`方法;移开鼠标时,触发`mouseoutHander`方法。同时,我们还创建了一个类为`dpop`的弹窗div,它在`...

    css overflow溢出隐藏(文字溢出时的自动隐藏处理)

    text-overflow属性可以取值"clip"和"ellipsis",其中"ellipsis"值会显示省略号表示被截断的文本。 以下是一个使用overflow和text-overflow属性实现内容溢出时显示省略号的示例: ```html &lt;!DOCTYPE html&gt; li { ...

    设置table中的宽度不随文字改变让其固定

    如果不想让文字换行,而是希望超出的内容被隐藏,并显示省略号,可以使用以下CSS样式: ```html &lt;td style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"&gt;长文本内容...&lt;/td&gt; ``` 这种方法...

    25条div+css编程提醒及小技巧整理

    来将超出部分显示为省略号,但在IE5和FF中无法实现,需要单独处理。 19. 为了防止在IE浏览器中由于注释导致的文字重复问题,可以使用条件注释的方式来进行规避。 20. 在CSS中调用外部字体,可以使用@font-face规则...

    gridview一般换行,强制换行

    默认情况下,GridView会尝试适应内容,但如果内容过长,可能不会自动换行,而是截断或显示省略号。 1. **一般换行**:在默认情况下,GridView的单元格(cell)内的文本如果没有超过单元格宽度,会自动换行。但当...

    js使用小技巧

    根据鼠标获得元素: document.elementFromPoint(event.x,event.y).tagName=="TD document.elementFromPoint(event.x,event.y).appendChild(ms) 窗体图片 document.images[索引] 窗体事件绑定 document....

Global site tag (gtag.js) - Google Analytics