`
bolan392
  • 浏览: 276874 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

截断大文本并以省略号替代的样式

    博客分类:
  • CSS
阅读更多

  在HTML页面的表格中显示长时,表格总是会因为文字过多而拉伸变形,所以通常需要截断文本,并在后面添加省略号,当鼠标移动上来时再弹出全部内容的提示,要做到这种效果,则需要经过以下几步:

  首先,定义以下CSS样式表:

.title
{
          width:150px;
          white-space:nowrap;
          word-break:keep-all;
          overflow:hidden;
          text-overflow:ellipsis;
}

  其次,将需要显示的文本放在DIV中,让DIV应用以上样式表:

<div class="title" title=" 一段很长很长很长很长很长很长很长很长的文字">
	一段很长很长很长很长很长很长很长很长的文字		
</div>

这样,DIV中的文本就会自动截断显示,并使用省略号替代截断的部分,当鼠标移动到DIV上时,则会弹出完整文字的提示。

分享到:
评论

相关推荐

    CSS实现文字多行省略效果.zip_朋友圈文字最后变成省略号

    当我们需要展示大量文本但受限于有限的空间时,可以利用CSS来实现文字的多行省略效果,让超出部分以省略号(...)的形式呈现。在给定的“CSS实现多行文字显示省略号效果.zip”压缩包中,包含了一个名为“2.css”的...

    javascript 实现文本使用省略号替代(超出固定高度的情况)

    在JavaScript中,有时候我们需要在文本超出预设高度时用省略号替代,以保持界面的整洁和用户体验。本文将详细讲解如何使用JavaScript实现这一功能,特别是针对固定高度的元素。 首先,我们需要理解基本思路。当一个...

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

    在网页设计中,有时候我们希望文本在单行内显示,如果内容超过指定宽度,就需要自动截断并在结尾处添加省略号。这是一个常见的需求,主要应用于标题、摘要或者列表项的展示。在CSS中,我们可以利用特定的样式来实现...

    【mark】单/多行文本内容溢出显示省略号…

    一种常见的做法是当文本超出指定区域时显示省略号(...),以此来告知用户这部分内容被截断了。本文将详细介绍如何在不同场景下实现单行或多行文本内容溢出显示省略号的功能。 ### 一、基本概念 #### 1.1 溢出显示...

    CSS文本超出div或者span时用省略号代替

    这是一段过长的文本,当超出容器宽度时,将会用省略号替代超出部分。 ``` 通过以上CSS设置,当文本长度超过`title`类元素的宽度时,超出的部分会被隐藏,并在末尾显示省略号,以此达到预期效果。这种方法在处理新闻...

    深入扩展文本溢出解决方案.docx

    前者确保文本超出部分被省略号替代,后者则确保文本不会换行,即使内容过长也会被截断。这种方法几乎在所有现代浏览器中都能良好运行。 #### 多行文本溢出 多行文本溢出的需求更为复杂。当文本长度超过设定的最大...

    TextView解决自动换行问题

    android:text="这里是一段很长的文本,可能会超过两行显示,超出部分将被省略号替代。"/&gt; ``` 6. 对于运行在API 27及以上版本的设备,由于`android:singleLine`已被弃用,你可以使用`android:layout_width="wrap_...

    CSS强制文本在一行内显示若有多余字符则使用省略号表示

    CSS(层叠样式表)提供了一种方法来强制文本在一行内显示,并且当文本超出容器宽度时,使用省略号(...)来表示被截断的部分。这个功能主要通过`text-overflow`属性来实现,它与`white-space`和`overflow`属性配合...

    js实现文字超出部分用省略号代替实例代码

    JavaScript 实现文字超出部分用省略号代替是一种常见的前端开发技巧,主要用于限制文本显示的长度,当内容过多时,用省略号(...)替代超出部分。这种方法通常用于文章摘要、标题或者任何需要限制显示长度的文本区域。...

    标题长度溢出时,自动显示为省略“...”的Css text-overflow

    而ellipsis值则会使浏览器显示一个省略号,以提示文本被截断了。当我们选择ellipsis值时,需要确保文本不会换行,并且元素盒子没有足够的空间来容纳整个文本内容,这样浏览器才会应用省略号效果。 为了使text-...

    CSS 控制标题长度,不再需要切字符串函数了 ^_^.txt

    #### 一、CSS截断文本的基本原理 在CSS中,可以利用`overflow`属性结合`white-space`和`text-overflow`属性来达到文本截断的效果。这种方法简单且高效,能够有效避免使用JavaScript所带来的额外负担。 #### 二、...

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

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

    EditText篇1

    `maxLines="1"` 会保持原有换行,而 `singleLine="true"` 会将超出部分截断并显示省略号。在新版本的 Android 中,推荐使用 `maxLines="1"` 替代 `singleLine="true"`,并且配合 `android:inputType="text"` 以获得...

    做网站可能用到的东西

    - 这段代码的作用是限制文本长度,并在超过指定宽度时用省略号表示剩余内容: ```html 这是一个过长的示例文本可能会被截断 这是一个过长的示例文本可能会被截断 ``` #### 二、图像标签的`alt`与`title`属性 ...

Global site tag (gtag.js) - Google Analytics