css 文本长度超出div，单行显示后，div宽度不生效

已于 2023-09-05 11:23:00 修改
阅读量250 收藏
点赞数
文章标签： css 前端
于 2023-07-07 17:25:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37538302/article/details/131601502
版权
当在div样式中添加display:inline-grid属性时，结合overflow:hidden,text-overflow:ellipsis和white-space:nowrap，可以确保div的宽度设置正确生效，从而控制内容的显示方式。
摘要由CSDN通过智能技术生成 
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

添加display: inline-grid;属性，div宽度生效

浅笑&微凉
关注
文本超出父容器使用省略号显示，鼠标移入浮层显示全部文本自定义组件，不超出不提示。
aegean55的博客
09-15 358
有问题欢迎讨论，一起学习 <template> <div class="utm-ellipsis-wrapper"> <Tooltip :content="content" class="utm-tooltip utm-ellipsis-tooltip" placement="bottom-start" :disabled="isDisabled" :transfer="transfer" .
2022-11 CSS：flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中
weixin_49752665的博客
11-25 1795
如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第三行标签盒子也设置flex布局。如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第一行也设置flex布局。再对第一行公司名称设置flex：1，实现不设置文字宽度的超出隐藏。另：以上两种情况，右侧盒子无需设置flex：1。设置最小高度是为了，当第三行标签不存在的时候，右侧盒子高度会小于图片高度，由于父元素设置了aline-items：center，右侧盒子会居中。
CSS text超过div范围（文字范围与父节点范围不一致）
FeiChangWuRao的博客
04-19 1526
弄页面经常会遇到div里面有各种div和text的情况，和普通的div不太一样，text有的时候会引发一些不同的问题，导致显示效果的达不到预期。比如text超过div的宽度范围，还有一种就是直接就是错位的状态，你通过开发工具查看的时候，很容易发现父节点和子节点的范围不在一起。第二点混合错位那个是我在开发小程序遇到的，很蛋疼如果你发现有一个莫名其妙的空间没有对应的设置你又找不到原因，你可以考虑一下。...
css文字超出省略（不生效主要从盒模型问题处理）
weixin_43837268的博客
05-16 9742
1.单行省略 width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; 2.多行省略 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -we...
设置当内容超出div（文字长度超出div宽度）出现滚动条
热门推荐
XCMercy
01-15 5万+
当内容超出div时，自动出现滚动条的条件 内容必须在div中 div要设置宽高 overflow设置为auto 备注 overflow:auto;当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条。 overflow-x:auto;当内容宽度超出div宽度，自动出现水平滚动条 overflow-y:auto;当内容宽度...
为什么文字会超出div的宽度,以及解决方案。
weixinhmz的博客
07-24 1003
为什么文字会超出div的宽度,以及解决方案。
CSS中怎么让DIV居中亲自实验得出的结论
12-02
然而，这种方法在某些旧版本的IE浏览器中可能不生效，除非文档类型定义（DTD）正确指定。例如，如果HTML文档缺少像下面这样的DTD声明： ```html <!DOCTYPE ...
CSS单行与多行DIV水平居中方法详解
尽管有些人可能会提及使用`vertical-align`属性，但要注意这个属性并不适用于所有元素，特别是对于`<div>`和`<span>`这类没有`valign`特性的元素，它无法直接生效。 针对单行垂直居中，作者提供了一个简单的示例。...
css3 flex实现div内容水平垂直居中的几种方法
11-21
- `nowrap`：所有项都在同一行内，即使超出了容器的宽度。 - `wrap`：如果空间不足，项目会换行，以适应容器的高度。 - `wrap-reverse`：与`wrap`相反，但换行的方向相反。 3. `justify-content`：设置flex项在...
CSS实现小图标跟随文本(多行文本省略时显示在省略号后面)
java_wzh123的博客
04-21 7665
CSS实现小图标跟随文本(多行文本省略时显示在省略号后面) 1、应用场景 在一个多行省略的文本中，要求文本后显示一个小图标，且触发了多行文本省略后，小图标依然显示在省略号后面。如下图： 2、实现代码 html代码如下： <div class="container"> <div class="content-wrapper"> <div class="content"> <!--小图标1(文本超出隐藏后显示)-->
解决文本超出div外显示，文本多行或者单行进行省略
公众号安哥说前端
07-28 1958
解决文本超出div外显示，文本单行进行省略，文本多行进行省略
css 文本超出显示省略号不起作用
韩旭的博客
07-16 4951
一、单行文本显示省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 二、多行文本显示省略号 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; //基于webkit内核，基本够用 当然前提是手机端 然后我们现在了遇到这样一个问题 首
css 文本超出显示点点点，英文没效果
最新发布
x03_01的博客
05-28 437
中文超出的确隐藏了，但是英文没有隐藏。//纯英文、数字、中文。
css实现文本超过指定行数显示省略不生效的问题
关中刀客在青岛
10-22 1292
css实现文本超过指定行数显示省略不生效的问题 要用css实现文本超过指定行数显示三个点的效果，正常样式写法如下： /*超过2行隐藏，并以三个点结尾*/ .limit2line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } 但react项目中使用时遇到问题了。一共用了两处，一处起作用，一处不起作用，其中不起作用的元素在控制台中把样式前面的勾打掉
用div控制文字长度，超出范围用...表示
群来群往的博客
07-04 4133
&lt;div style="width:300px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;"&gt;实时订重置密码成功实时订重置密码成功实时订重置密码成功&lt;/div&gt;备注：其他元素也可用，比如&lt;span&gt;&lt;/span&gt;...
（转）CSS处理文本过长或超出部分
sharpeha的博客
07-04 2648
原帖：https://segmentfault.com/a/1190000009873744在网页开发中，经常会遇到文本超出了限定的范围，尤其是屏幕尺寸的大小导致的，着实影响美观，这个时候，就需要用css对其进行处理。下面的方法是我在实际工作中总结出来的，给大家参考一下。（1）用省略号代替超出的部分，这个就是高度、宽度都受到限制的时候适用（是我比较喜欢的一种）text-overflow:clip ...
css多行文本超出显示省略号无效解决方法
supming1的专栏
12-29 7173
css多行文本超出显示省略号，以2行为例，网上很多解决方法，如下。之前一直采用的是这种方法，最近发现无效了。vant也是这种写法， .txt-ellipsis-2 { display:-webkit-box; overflow: hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; text-overflow: ellipsis; word-break: break-all; } 排查后发现
flex:auto元素内容超出显示省略号设置无效 解决方案
苍老师背后的男人
10-13 5160
举个例子：content元素的 width 为 200px（即下图 黄色背景），中间有两层div，分别是 aaa 和 bbb，都是flex布局，且没设置width，最里面一层有个p 元素。要求： p 元素的 宽度 根据 内容的长度 自适应； 若 p 元素内容超长，则显示为省略号； 问题：从上图可以看出，内容超出时，虽然设置了css样式，但并没有变成 省略号。 解决方案：p元素加多一个 width: 0 即可。如下图： 注意：width的值可以随便设置，只要不是百分比类的单位( 如vw，%..
css中超出几行后文字隐藏，显示...的问题
峰会路转的博客
09-01 1493
在要做这种效果的div/p元素上是不能设置高度的，某种不生效,最终代码,但是不设置高度导致并列的div高度不一致，出现div由文字内容来撑起高度，层次不齐得不美观界面，于是把高度转移到父级上面去就可以了。2.当前元素上加高度，同时设置超出溢出省略号,省略号不生效了。最终方案：把高度转移到父级上面去就可以了。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值