`
dyclh
  • 浏览: 50883 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

div CSS text-overflow

阅读更多

一般的文字截断(适用于内联与块):
 Example Source Code [www.mb5u.com]

.text-overflow {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

对于表格文字溢出的定义:
 Example Source Code [www.mb5u.com]

table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

需要你注重的是,这个东东只对单行的文字的效,假如你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“...”,其它的浏览器文本超出指定宽度时会隐藏。

分享到:
评论

相关推荐

    无js实现text-overflow: ellipsis; 完美支持Firefox

    `text-overflow: ellipsis;` 是 CSS3 提供的一个样式属性,用于处理溢出的文本,但在 Firefox 浏览器中,无 JavaScript 的情况下,直接使用该属性可能存在兼容性问题。本知识点将详细介绍如何在 Firefox 中无 JS ...

    溢出文本text-overflow的使用问题分析及解决

    text-overflow属性就是用来解决这个问题的CSS属性。它有两个属性值:clip和ellipsis。 首先,我们来详细了解一下这两个属性值的含义和区别: 1. clip:这个值表示“裁剪”。当文本溢出时,超出部分将被简单地裁剪...

    HTML超出文本显示省略号...通过text-overflow实现

    要实现这个效果,我们需要结合使用`text-overflow`, `white-space`和`overflow`这三个CSS属性。以下是具体的实现步骤: 1. **`text-overflow: ellipsis;`**:这是核心属性,告诉浏览器当文本溢出元素边界时,应该...

    CSS省略号text-overflow超出溢出显示省略号

    在CSS中,text-overflow属性用于定义如何向用户表示被隐藏的内容。当文本溢出其包含元素的范围时,通常会在溢出的元素后面出现省略号来表示还有更多内容未显示。这种效果常见于布局限制,如在列表、表格或特定宽度的...

    无hack无js全兼容text-overflow-ellipsis效果

    标题中的"无hack无js全兼容text-overflow-ellipsis效果"指的是在网页设计中实现文本溢出时显示省略号的效果,而且这个方法无需使用JavaScript(js)或任何黑客(hack)技巧,并且能够兼容各种浏览器。`text-overflow: ...

    用CSS控制标题字数

    <div class="text">非常多的字数你能控制得了不可能的骗你是小狗</div> ----------------------------------------------------------------------------------------------- 注释说明: white-space:normal /*...

    DIV-CSS-必考题.docx

    问题描述:假定有如下情况:<div id="a"><div id="b"></div></div> 如果要实现 b 在 a 中居中放置,一般只需用 CSS 设置 a 的 text-align 属性为 center。这样的方法在 IE 里看起来一切正常;但是在 Firefox 中 b 却...

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

    例如,在div容器中,若内容超出了div设定的高度和宽度,可以通过设置overflow属性来控制显示或隐藏溢出内容。在某些情况下,也可以利用text-overflow属性结合overflow属性来实现优雅的溢出处理。text-overflow属性...

    用css截取字符的几种方法详解(css排版隐藏溢出文本).docx

    当你希望隐藏超出容器宽度的文本时,可以使用`overflow`属性配合`text-overflow`属性。`overflow`设置为`hidden`会让超出部分不可见,而`text-overflow`则定义了如何处理这些被剪裁的文本。例如: ```css div....

    day03(CSS01-基础选择器+字体文本样式).rar

    9. **文本溢出**:`overflow`控制超出容器的文本显示方式,如`overflow: hidden;`可隐藏超出部分。 10. **文本阴影**:`text-shadow`为文本添加阴影效果,格式为`text-shadow: h-offset v-offset blur-radius color...

    专业的div+css代码大全

    `text-overflow`属性用于处理文本溢出的情况,当文本内容超过其容器的宽度时,可以使用`text-overflow:ellipsis;`来隐藏多余的部分,并以省略号显示。这在显示长标题或有限空间的内容展示中非常有用。 `word-wrap`...

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

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

    CSS控制文本的长度 超过一行显示省略号的实现方法

    text-overflow:ellipsis; white-space:nowrap; overflow:hidden; >a b c d e f g h i j k l , msa sd sd sa w df f </div>  text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并...

    用css截取字符的几种方法详解(css排版隐藏溢出文本).pdf

    通用的CSS截断字符串的方法是利用`text-overflow`属性,结合`overflow`和`white-space`。如下所示: ```css div.test { width: 200px; height: 14px; overflow: hidden; white-space: nowrap; text-overflow: ...

    CSS控制html文本溢出

    CSS提供了多种方法来实现这一目标,其中一种常用的技术是通过`text-overflow`、`overflow`以及`white-space`等属性的组合来实现文本溢出时的截断与省略号显示效果。 #### 二、关键概念与属性介绍 ##### 1. `text-...

    HTML超出文本显示省略号…通过text-overflow实现

    需要对div或者span同时应用Css: 复制代码代码如下: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 即可实现所想要得到的溢出文本显示省略号效果。 当然了你的页面元素要设置固定的宽度,超出了...

    用CSS实现超长字段被省略的简单方法.rar

    首先,我们需要理解CSS中的`text-overflow`属性。这个属性用于控制当元素的内容溢出其边界时如何显示。在IE中,我们可以结合`text-overflow: ellipsis;`和`overflow: hidden;`这两个属性来实现省略号的效果。`text-...

    纯css控制超出部分省略号显示

    - **CSS版本兼容性**:尽管现代浏览器已经广泛支持`text-overflow`属性,但在一些较旧的浏览器版本中可能仍然存在问题。因此,在生产环境中使用时,应考虑添加相应的兼容性代码。 #### 总结 通过上述步骤,我们...

    精通div+css网页样式与网页布局

    - `overflow-y`: 内容垂直方向上的溢出行为。 - `display`: 显示类型。 - `visibility`: 可见性。 7. **边距样式(Margin Properties)** - `margin`: 边距。 - `margin-top`: 上边距。 - `margin-right`: ...

Global site tag (gtag.js) - Google Analytics