针对英文&&数字&&中文通用，文本溢出显示省略号

最新推荐文章于 2023-09-28 09:15:12 发布
置顶 最新推荐文章于 2023-09-28 09:15:12 发布
阅读量392 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40055200/article/details/102743556
版权

overflow:hidden;white-space:normal;word-break:break-all;text-overflow:ellipsis


<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <meta name="theme-color" content="#fafafa">
  <style>
    @media screen and (max-width: 700px){
      .demo{
        border: 1px solid #000000;
        width: 50px;
        height: 20px;
        overflow:hidden;
        text-overflow:ellipsis;
        word-break:break-all;
        white-space:nowrap;
        margin: 0 auto;
      }
      body{
        background-color: red;
      }
    }
    @media screen and (max-width: 500px){
      .demo{
        border: 1px solid #000000;
        width: 50px;
        height: 20px;
        overflow:hidden;
        word-break:break-all;
        text-overflow:ellipsis;
        white-space:nowrap;
        margin: 0 auto;
      }
      body{
        background-color: blueviolet;
      }
    }
  </style>
</head>

<body>
  <!--[if IE]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <!-- Add your site or application content here -->
  <p>Hello world! This is HTML5 Boilerplate.</p>
  <div class="demo">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>

</body>

</html>

qq_40055200
关注
『C/C++养成计划』Visual Studio Code编辑器配置(外观&通用型扩展&Minmal)
AI新视界
02-15 1082
vscode插件大全 1.5. 执行代码扩展(code runner) 1.6. 版本管理扩展(gitlens和gitgraph) 1.7. settings.json总结 二. vscode配置C/C++|MakeFile|CMake 2.1. C/C++在线参考资料扩展(cpp reference) 2.2. 文档生成工具(Doxygen Documentation Generator) 2.2. C/C++扩展(重要) 2
css-（针对英文&数字&中文通用的）文本溢出显示省略号
weixin_30907523的博客
08-16 792
今天写遇到纯英文内容用文本溢出的代码并不管用，所以查了一下通用版本如下： overflow:hidden;white-space:normal; word-break:break-all;text-overflow:ellipsis; 转载于:https://www.cnblogs.com/yili-54944/p/9487197.html...
强制中英文换行及超出显示省略号的问题
小草莓的博客
09-30 2595
超出2行不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）超出不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）当固定盒子的宽度时，中文会换行，但是英文和数字不换行。如要想要超出N行再显示省略号，只要改变。
html text-overflow:ellipsis,CSS3 Text-overflow
weixin_30290673的博客
06-17 526
CSS3中Text Effects属性一共有三个；text-overflow;CSS3中一个常用的属性，在《CSS3中有关文本效果的另一个属性：text-overflow的使用。大家在平时的网页制作中一定碰到过内容溢出的问题，比如说文章列表很长，而其宽度又受到限制，此时超出宽度的内容就会以(...)显示。以前实现这样的效果都是由后台程序截取一定的字符数在前台输出，另外一种方法就是使用js截取一定的...
文本溢出的解决方法（单行和多行）
donghua201的博客
09-28 201
作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis 生效的基础。
解决英文溢出不换行
weixin_30509393的博客
09-24 401
英文溢出不换行而中文溢出会换行 ，因为中文一个字就是一个字符浏览器知道有多少个字符，而英文字母 浏览器不知道整体是一个单词 还是由许多单词组成 ，就统一当成一个单词处理 所有就会溢出不换行了，但是在英文里面加了空格溢出就会换行了， 因为你已经标识出来了哪几个字母是组成一个单词 ，无论两个单词之间写多少个空格都是显示一个空格 ，这里空格是分隔符 不代表空格文本 word-...
css样式之精灵图与字体图标跟多行显示省略号
weixin_53155105的博客
08-03 520
为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送 请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。 因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。 核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了 使用精灵图核心总结： 1. 精灵图主要针对于小的背景图片使用。 2. 主要借助于背景位置
IE8/9 使用text-overflow: ellipsis 做块元素超长内容变省略号的问题
09-25
虽然标准的CSS属性支持需要包括overflow, white-space和text-overflow三个属性的结合使用，但在IE8中实现单行文本溢出显示省略号的功能，还需要遵循一些特定的规则。 在CSS中实现文本溢出隐藏并显示省略号效果的...
使用CSS控制文本溢出：ellipsis与overflow应用
CSS提供了多种方法来处理这种文本溢出的问题，使得我们可以优雅地控制和显示超出部分的文本。在给定的文件中，我们看到一个关于CSS控制文本溢出的实例，主要涉及了`text-overflow`、`overflow`和`white-space`这三个...
Web前端知识CSS（阿里矢量图标引入方式、文本溢出显示省略号）
m0_72686827的博客
08-15 389
1.使用步骤1.登录阿里矢量图标网站2.搜索想要的图标且加到购物车3.点击右上角的购物车4.选择下载代码，下载完成后解压文件5.把下载的文件放到你的项目中6.引入iconfont.css文件或者iconfont.js文件使用三种方式：下载代码1、Unicode 方式引用Unicode 是字体在网页端最原始的应用方式，特点是：兼容性最好，支持 IE6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。...
解决Flex布局下英文字符使用ellipsis可以正常省略而中文不省略的问题
AzeShinja的博客
07-14 401
在父容器为flex布局下, 在子布局中加入如下CSS代码 overflow: hidden; white-space: nowrap; // 加了这一行才实现的中文有省略号 text-overflow: ellipsis; height: 19px; display: inline-block; width: 43px; 在使用ellipsis省略号的时候， 要做到本元素足有 块级元素的属性 有固定宽和ov
css文本超出隐藏显示省略号（纯中英文、数字都适用）
m0_46862838的博客
03-25 3415
超出隐藏显示省略号 text-overflow: ellipsis; 显示那三个点 word-break: break-all; 如果不确定会有纯数字或者中文那一定要加上这句，不然到时候就会出现数字有作用而中文却没有作用，或者中文有作用而数字没有用 display: -webkit-box; //使用了flex，需要加 overflow: hidden; //超出隐藏 word-break: break-all; //纯英文、数字、中文 text-overflow: e
CSS高级技巧（2）溢出的文字隐藏
u010963053的博客
04-29 220
溢出的文字隐藏 word-break 自动换行 normal 默认 break-all 允许单词内执行 keep-all 只能在半角空格或连字符处换行 white-space 用于强制一行显示内容 normal默认 nowrap 强制在同一行内显示所有文本，知道文本结束或者遭遇br标签才换行 text-overflow 文字溢出 text-...
文字超出div，设置text-overflow:ellipsis不起作用问题
热门推荐
zhouxukun123的专栏
07-01 4万+
问题描述 单行文字长度超过文本框width值导致换行问题，在设置了overflow : hidden; text-overflow: ellipsis; 仍不起作用 环境：Google浏览器 解决方法 通过设置text-overflow: ellipsis;样式实现以省略号展现超出部分。 CSS 代码 &amp;lt;style type=&quot;text/css&quot;&amp;gt; .hideTex...
阻止搜索引擎抓取网站的工具_使用PHP将抓取的网站转变为搜索引擎
culi4814的博客
08-29 423
图像检索搜索引擎In the previous part of this tutorial, we used Diffbot to set up a crawljob which would eventually harvest SitePoint’s content into a data collection, fully searchable by Diffbot’s Search API....
“21天好习惯”第一期－16
Zh@ng的博客
11-07 550
学习内容：JavaWeb 写了下作业，实现了用户登录及用户注册，主要包括数据库的连接和操作、对输入的各种判断和处理，同时加深理解了前后端分离的思想及其具体操作。 部分代码如下： 注册界面： $(function () { var regUrl = '/user/reg.do'; //用户名正则，6到20位（字母，数字，下划线，减号） var uPattern = /^[a-zA-Z0-9_-]{6,20}$/; //密码正则，6到20位（字母（含大小写）+数字的
HTML长串英文字符溢出问题
球er的工匠区
05-16 1610
在html中要当数据太长时，会用到折行显示 ，此时把 nowrap class="table-header2"> 的nowrap去掉。但是这种情况对连续的字母和数字是不好用的。因为解析的时候会把它看成是一个单词。要解决问题必须强制折行。这就需要断词 用  <td class="text-caption2-normal" style="word-break:break-all;word-wrap
CSS 单(多)行文本超过部分显示省略号，解决数字或英文不换行问题
涛々的技术博客
08-19 6449
单行文本超过部分显示省略号 .a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 多行文本超过部分显示省略号，并且兼容数字或英文不换行问题 .a { white-space: normal; overflow: hidden; text-overflow...
单行、多行溢出隐藏显示省略号（解决纯数字、纯英文会失效问题）
xxx_datou的博客
01-19 1630
单行溢出隐藏： width:300px; overflow: hidden; text-overflow:ellipsis; whitewhite-space: nowrap; 多行文本溢出隐藏： display: -webkit-box; display: -moz-box; white-space: pre-wrap; word-wrap: break-word; //允许长单词或 URL 地址换行到下一行。 text-overflow: ellipsis; -webk
css 文本溢出显示省略号
最新发布
08-31
CSS 中文本溢出显示省略号的功能通常通过 `text-overflow` 和 `overflow` 属性配合使用来实现。当你设置元素的内容超出其容器时，可以控制如何处理溢出的部分。 1. `text-overflow` 属性：用于指定当文本溢出元素内容区域时的行为。常见的值有 `ellipsis`（显示省略号），`clip`（截断超出部分），以及 `hidden`（隐藏溢出内容）。 例子： ```css .text-truncate { white-space: nowrap; /* 防止换行 */ overflow: hidden; /* 如果内容溢出，隐藏多余的 */ text-overflow: ellipsis; /* 显示省略号 ... */ } ``` 2. `overflow` 属性：它定义了当内容超过容器尺寸时，多余部分是否可见。配合 `text-overflow` 使用，可以使文本溢出显示成省略号。 结合两者使用： ```css .text-truncate { display: -webkit-box; overflow: hidden; /* 隐藏超出部分 */ -webkit-line-clamp: 3; /* 只显示三行 */ -webkit-box-orient: vertical; /* 设置为垂直方向的多行盒模型 */ text-overflow: ellipsis; /* 当超出时显示省略号 */ } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值