CSS截取字段,让过长的字段结尾变成省略号（IE有效）

最新推荐文章于 2024-05-06 21:51:47 发布

最新推荐文章于 2024-05-06 21:51:47 发布 · 193 阅读

文章标签：

#IE #CSS #HTML

本文通过一个简单的HTML示例介绍了如何使用CSS属性解决文本过长时的显示问题，当文本长度超过指定宽度时，将显示为省略号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>测试字段过长结尾变省略号</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <style type="test/css" >
    	.texthidden
    	{
	     overflow:hidden;
	     text-overflow:ellipsis;
	     white-space:nowrap;
	     border:1px solid #ddd;
	     }

    </style>

  </head>

  <body>
    <div>123456789</div>
	<br>  
	<div style="text-overflow:ellipsis;overflow:hidden;width:30px">123456789</div>  
  </body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

fenghaoo

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

统信系统UOS桌面版V20 用户手册

Reyn_观极

07-27

1万+

UOS桌面版V20用户手册。

m0_55613022的博客

02-24

3513

HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f

参与评论您还未登录，请先登录后发表或查看评论

CSS截取字符串

12-11

利用CSS截取字符串,更好的优化系统，节约资源，避免不必要的错误

CSS截断字段的方法

weixin_30856965的博客

06-12

138

1、单行截断 div{ text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; white-space:nowrap; -moz-white-space:nowrap; -o-white-space:nowrap; width:100px; border:1px solid #000; } ...

html 截取字段,css的截取字符串

weixin_32049085的博客

05-30

329

jquery或者js，获取匹配字符串更换CSS样式比如说有个div的class名为name 有个div的class名为box 使用jquery或者j欢迎来到CSS布局HTML，根据你的要CSS布局HTML小编今天和大家分享，我写了下面的范例代码，请参考： //记得要先引入jQuery.js框架哦 $(document).ready(function(){ i关于css截取字符串并以省略号展示.....

用css截取字符，并加省略号

北极光的博客

09-10

561

本人对css不是了解太多，只会些基本操作，今天在群里看到一个css的用法，挺不错的，能直接截取标题的字符，并自动将截取后的标题加上省略号，这个方法比较省事，记录下来： width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 这样，不论标题有多长，都会自

网页中字段太长，省略号表示。css显示

02-20

css 省略号 字段太长网页中字段太长，省略号表示。css显示也可以用jsp代码，但是比这个代码量多一些

前端速成教程（HTML、CSS、JS、Vue…）

最新发布

https://www.hyperplasma.top

05-06

3726

JavaWeb开发 SSM框架基础前端速成——HTML、CSS、JS、Vue、Ajax、前端工程化。Web技术教程：W3Schoo。Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。Vue-cli是Vue官方提供的一个脚手架，用于快速生成Vue项目模板。

前端三件套知识点

二氧化硅.的博客

01-11

2907

前端三件套知识点

CSS将字段过长结尾变省略号

一个平凡的程序猿

01-28

4016

字段过长结尾变省略号 div 就是比如有一行文字，很长，表格内一行显示不下. 就a是比如有一行文字，很长，表格内一行显示不下. 就1是比如有一行文字，很长，表格内一行显示不下. 就F是比如有一行文字，很长，表格内一行显示不下. 就是 Like You Pig Very Very Very Much.

CSS样式解决文字过长显示省略号问题

11-21

一、CSS样式解决文字过长显示省略号问题 1、一般样式　　一般 css 样式，当宽度不够时，可能会出现换行的效果。这样的效果在某些时候肯定是不行的，可以修改 css 样式来解决这个问题。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>text-overflow</title> <link rel="stylesheet" type="text/css" href="h

html中对td标签内的过长字段进行省略号处理

whale的博客

01-09

585

（1） css样式： table { table-layout: fixed;} HTML中table代码：序号用户名联系电话操作【对于bootstrap应该设置th的固定宽度】设置td超过固定宽度自动显示为省略号： table tr td { overflow:hidden; white-space:nowrap; text-overflow:...

css截取字符串的方法,CSS3截取字符串实例代码【推荐】

weixin_30336701的博客

08-03

940

截取字符串一般是用js或者后台语言来实现，其实使用CSS也是可以实现此效果的。代码实例如下:CSS教程-脚本之家#first{width:120px;height:30px;background-color:#F30;overflow:hidden;text-overflow:clip;white-space:nowrap;}#second{width:120px;height:30px;back...

CSS样式截取字符串

爱吃鱼油

01-10

1921

css 截取字符串 div.test{ width:200px; height:100px; border:1px solid red; padding:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 做自己的SEO 做自己的DIV+CSS 做自己的PHP

vue内容超过的内容自动换成省略号

m0_37672495的博客

04-21

903

在export中定义 export default{ filters: { ellipsis (value) { if (!value) return '' if (value.length > 8) { return value.sli...

CSS截取字符串，多余文字用省略号显示

卡布洛技术专栏

06-16

8016

最近才知道css也有这么叼炸天的一面~~~ 做个类似论坛的页面，用户头像70px，但是用户名没法限定啊，英文中文都可以，你说他要是取个“我的名字好长呀，你该怎么办呢”，那老衲不就蛋疼菊花紧了~~ 幸好，老衲于不幸中的万幸中发现了css这么叼炸天的一面，以前一直不知道，写出来分享给大家很简单，大屁不多放，直接开菊花： css里面如下设置： a.name{ line-height: 30

多行文本超出范围显示省略号，IE使用。

jxf4jqh的博客

09-28

1740

对于IE兼容的共同方法多行文本通过css可设置完成，但是IE不兼容display: -webkit-box;属性而不可使用。本方法将字符串分截成多段后以最后一行使用单行省略号实现。提示：以下是本篇文章正文内容，下面案例可供参考一、字符串分段创建一个虚拟节点，循环字符串并填入节点中，节点长度与外层div节点进行比较，超出则截取继续存入下一行。 // 建立一个虚拟节点 let measure = ce('span'); (function (s) { s.position = 'absolute';

CSS字符串截取

ime33的博客

06-13

1582

未经允许，不得转载！水平有限，欢迎指正、交流！源码： css截取字符串 *{padding: 0;margin: 0;font-family: "微软雅黑"} h3{margin: 15px 0;text-align: center;} .demo{ margin: 15px 0 30px 0; } div.demo1

用style来实现把过长的字符串替换为省略号

blog之antyi

10-27

1075

当某个页面要显示文章的列表时，往往不希望每行的标题由于长度过长而换行，而是希望把过长的字符串用省略号来代替。以前我都是用程序在后台去把过长的字符串替换为省略号，但是这样做的缺点是不好维护，如果哪天想把每行的长度变长一些，还得去改程序。其实，用style完全可以实现这种效果。请看下面的例子：html>head>style>.fixedTable {}{ TABLE-LAYOUT: fix

CSS实现字段省略显示技巧

String text = "此处填充需要显示的文本，如果文本很长需要在前端显示省略号"; BreakIterator bi = BreakIterator.getWordInstance(); bi.setText(text); int end = bi.following(20); // 假设容器宽度能显示20...