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

用 CSS 将超出显示宽度的内容隐藏起来

    博客分类:
  • CSS
阅读更多
css 代码
 
  1. "text/css">  
  2. .textOverFlow {  
  3. width:300px;  
  4. overflow:hidden;  
  5. text-overflow:ellipsis;  
  6. whitewhite-space:nowrap;  
  7. border:1px solid #ddd;  
  8. }  
  9.    


xml 代码
 
  1. <div class="textOverFlow">  
  2. 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测  
  3. <!---->div>   


实现原理:


(1)指定宽度width:300px;
(2)overflow:hidden;  将超出内容隐藏
(3)text-overflow:ellipsis; IE 专有属性,当对象内文本溢出时显示省略标记(...)
(4)white-space:nowrap; 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。
分享到:
评论

相关推荐

    Css测试,li超出部分的汉字隐藏

    标题"Css测试,li超出部分的汉字隐藏"提示我们,这个话题主要关注如何在CSS中控制`&lt;li&gt;`元素内的汉字当其内容超过指定宽度时进行隐藏。 在CSS中,我们可以使用多种方法来实现这种效果,例如: 1. **overflow** ...

    Html内容超出标记宽度后自动隐藏

    这将隐藏超出容器宽度的部分,确保内容不会破坏页面布局。 为了让用户意识到有被隐藏的内容,可以使用`text-overflow: ellipsis`属性来添加省略号表示被截断: ```css span { text-overflow: ellipsis; } ``` `...

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

    根据标题和描述,以及提供的部分内容,我们可以了解关于CSS文本超出指定宽度后隐藏并显示为省略号的实现方法,以及相关的知识点。以下详细说明: 1. CSS中实现文本溢出显示省略号的基本属性组合: - `text-...

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

    设置为`nowrap`表示所有内容将在一行内显示,不会自动换行。 4. **`text-overflow:ellipsis;`**:此属性用于指定当内容被裁剪时是否显示省略标记(...)。设置为`ellipsis`表示内容被裁剪时显示省略号。 5. **`-o-...

    用css使单行超出指定宽度的内容切去并在结尾出现省略号

    在IE浏览器中,我们可以直接使用以下CSS来实现单行文本超出宽度后添加省略号的效果: ```css span { width: 200px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ...

    Html+CSS实现滚动条不挤占内容区宽度.zip

    本教程将详细讲解如何通过 HTML 和 CSS 技巧实现滚动条不挤占内容区宽度,让网页布局更加美观且功能完善。 首先,我们需要了解滚动条的基本概念。滚动条是当页面内容超过可视区域时出现的一种交互元素,允许用户...

    超出页面宽度部分的菜单栏转为下拉列表.zip

    "超出页面宽度部分的菜单栏转为下拉列表"是一个有效的解决方案,它将无法在一行内显示的菜单项转换为下拉列表,从而节省空间并提高可访问性。 首先,我们需要理解CSS(层叠样式表)在实现这一功能中的作用。CSS允许...

    如何通过CSS样式设置单元格显示内容的长度.doc

    当内容过长,我们不希望它完全显示,而是希望通过CSS样式将其截断,并用省略号表示被隐藏的部分。本文将详细介绍如何通过CSS样式实现这一功能,同时结合`table-layout`属性来优化表格的布局性能。 首先,`table-...

    HTML5-JS 超出页面宽度部分的菜单栏转为下拉列表.rar

    2. **用户体验**:下拉菜单的显示和隐藏应有良好的交互反馈,例如鼠标悬停、点击等事件触发下拉显示,以及合理的动画效果。 3. **可访问性**:确保菜单对于屏幕阅读器和其他辅助技术友好,遵循WCAG(Web Content ...

    表格 题头拖动 超出宽度显示省略号(中文亦可) 滚动条 兼容IE,FF,safari

    本话题主要涉及以下几个关键知识点:表格题头的拖动、超出宽度显示省略号、滚动条的使用以及跨浏览器兼容性,特别是针对IE、Firefox(FF)和Safari这三大主流浏览器。 1. **表格题头拖动**:这是一种交互设计特性,...

    jquery+鼠标经过显示全部内容离开隐藏部分内容

    在这个例子中,`.details`类设置了元素的宽度为300px,并且设置了溢出隐藏,只显示一行文字,多余的文字将被省略号代替,这为`mouseover`事件触发时展示完整内容提供了前提。 ### 5. 动态创建并插入DOM元素 通过...

    CSS超出文本指定宽度用省略号代替和文本不换行

    /* 隐藏超出宽度的内容 */ text-overflow: ellipsis; /* 当内容溢出时显示省略号 */ } ``` 这组样式组合在一起,可以确保文本在设定的宽度内显示,超出部分被隐藏,并用省略号(...)表示。`word-break: keep-...

    css li 超出隐藏代码

    总之,通过合理使用`width`、`white-space`、`text-overflow`和`overflow`这四个CSS属性,可以有效地控制`li`元素中文本的显示方式,使得内容在超出指定宽度时优雅地隐藏并以省略号表示,增强网页的美观性和用户体验...

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    本文将深入探讨如何使用HTML和CSS来实现滚动条的显示、隐藏以及自定义样式,使网页滚动条与整体设计更加协调一致。 首先,我们需要了解HTML5中引入的`overflow`属性,这是控制内容是否显示滚动条的关键。`overflow`...

    页面出现滚动条的时候如何让滚动条不影响页面宽度

    在网页设计中,当页面内容超出了可视区域的宽度时,浏览器会自动添加水平滚动条以允许用户水平滚动查看隐藏的内容。然而,滚动条本身会占用一定的空间,这可能会导致页面宽度缩小,从而影响布局的整体美观性。为了不...

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

    /* 当内容超出单元格宽度时隐藏超出部分 */ text-overflow: ellipsis; /* 在内容超出时显示省略号 */ } ``` `white-space: nowrap`属性禁止了文本在单元格内换行,使所有文字都在同一行显示。`overflow: hidden`...

    CSS让子容器超出父元素(子容器悬浮在父容器效果)

    前言 有时候,我们需要如下图这样一个悬浮效果需求: 实现 在标准的正常的情况下,只能使用 绝对定位 来完成。 第一步:父容器定位设置为 relative(相对定位)。 第二步:子容器定位设置为 absolute(绝对定位)...

    css样式显示省略号自定义宽度超过隐藏显示省略标记

    `,这将告诉浏览器在内容超出宽度时显示省略号。 ```css .xx { text-overflow: ellipsis; } ``` 组合以上代码,完整的CSS样式如下: ```css .xx { display: block; width: 200px; /* 自定义宽度 */ ...

    HTML+css 超出字符省略号表示

    这段CSS代码将确保文本在固定宽度内显示,超出的部分会被隐藏,并在结尾处添加省略号。请注意,这种方法只适用于单行文本。如果你需要在多行文本中实现省略号效果,情况会稍微复杂一些。 对于多行文本的省略号,CSS...

Global site tag (gtag.js) - Google Analytics