css设置文本溢出问题（ span ）

最新推荐文章于 2023-02-17 15:32:01 发布
最新推荐文章于 2023-02-17 15:32:01 发布
阅读量4.3k 收藏 2
点赞数 2
分类专栏： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ly_solo/article/details/80310470
版权

1/ 溢出隐藏必须有overflow:hidden;

2/溢出隐藏必须设置元素的宽和高，当超出范围是，才会隐藏

3/只有块块级元素才能设置宽和高，而span是行内元素，要转换成块级代码display:block;

下面代码是对<span>元素设置的代码，效果如下图

<span style="width:80%;padding-left:5px;white-space:nowrap;height:35px;display:block;overflow:hidden;text-overflow:ellipsis;">  </span>

white-space:nowrap;   规定段落中的文本不进行换行

text-overflow:ellipsis;   文本溢出显示省略号




ly_solo
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html span溢出隐藏,css实现溢出隐藏的方法
weixin_39844549的博客
06-03 1193
css实现溢出隐藏的方法发布时间：2021-04-09 09:45:08来源：亿速云阅读：86作者：小新小编给大家分享一下css实现溢出隐藏的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！css实现溢出隐藏的方法：1、用“text-overflow:ellipsis”属性实现单行文本的溢出显示省略号；2、使用WebK...
css多行文本溢出时出现省略号的示例
09-24
主要介绍了css多行文本溢出时出现省略号的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
span标签设置文本溢出内容显示省略号，鼠标悬浮显示全部内容vue elementui
00年女程序员分享自己的学习笔记
12-06 3430
完整代码如下： <template> <div class="border">   <div class="border-title">     <span>我的消息：</span>     <span>10</span>   </div>   <div class=&quo
span 文字宽度自动换行/超出部分自定义行数...显示
然而老干妈早就看穿了一切
01-06 2541
style="word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;" <div class="" style="margin-top:10px;background: #fff;"> <span style="word-break:normal; width:auto; display
span标签里的内容过长设置隐藏（CSS）
weixin_30376323的博客
07-16 1201
span{ width: 300px !important; float: left !important; overflow: hidden !important; text-overflow: ellipsis !important; } -------...
(css)span内容过长省略加提示
nyf_unknow的博客
02-17 1505
【代码】(css)span内容过长省略加提示。
span 超过长度限制 隐藏并在鼠标移入时显示全部字段
helei_qingzheng的博客
04-18 1万+
&lt;Span style=" display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap" title=content &gt;{{content}}&lt;/Span&gt; verflow: hidden;//超过指定的宽度和高度也隐藏 overflow:h...
兼容IE和FF的单行溢出文本显示省略号
09-27
在网页设计中，确保元素在不同的浏览器中呈现一致性是一项重要的任务。本文主要讲解如何实现一个兼容...通过以上步骤，我们可以创建一个在不同浏览器中一致的单行文本溢出省略号效果，提升网页的兼容性和用户体验。
第21章 CSS3文本效果
08-11
二、文本溢出（text-overflow） 在CSS3中，`text-overflow`属性用于处理超出容器宽度的文本。配合`white-space`和`overflow`属性，我们可以实现隐藏或以省略号表示被截断的文本。例如： ```css div { width: 100px;...
移动端的text-overflow多行文本溢出显示省略号(…)
12-10
在网页设计中，文本溢出显示省略号是一种常见的需求，尤其在移动端界面，有限的屏幕空间要求我们优雅地处理过长的文本内容。在移动端，`text-overflow: ellipsis` 属性常用于单行文本溢出时显示省略号，但其本身并不...
CSS(js)限制页面显示的文本字符长度
11-30
这个场景中提到的问题就是如何使用CSS和JavaScript（特别是jQuery）来限制`<span>`元素内的文本字符长度。让我们详细了解一下如何实现这一功能。 首先，CSS在限制文本长度方面的能力相对较弱。CSS本身没有直接提供...
CSS 网页内容换行控制
09-27
`text-overflow`用于设置当对象内文本溢出时是否显示省略号。其取值包括： 1. `clip`：默认值，不显示省略号，而是简单地裁剪超出的内容。 2. `ellipsis`：当文本溢出时，显示省略号。 要使`text-overflow: ...
CSS 文本溢出处理（单行和多行）
http____的博客
12-18 1301
文章目录1 单行文本2 多行文本溢出 1 单行文本 html： <span>单行文本溢出处理</span> css： span{ display: inline-block; width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } span{ border: 1px solid black; } 效果图： 注意： 要配合width属性使
span文本溢出显示...及span换行
weixin_46867950的博客
06-17 4669
span标签中实现换行 sapn{ word-break: normal; display: block; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; width: 20%; } white-space： 通过HTML文档的源代码排版方式控制页面显示文本的排版方式 取值：normal|pre|nowrap|pre-wrap|pre-line|inherit normal:正常无变化（
CSS中span内容超出部分以...显示
热门推荐
microdsy的专栏
12-15 7万+
使用text-overflow:ellipsis对溢出文本显示省略号有两个好处，一是不用通过程序限定字数；二是有利于SEO。需要使用对对溢出文本显示省略号的通常是文章标题列表，这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。设置span的属性为：<style type="text/css"> span{ overflow: hidden; text
html span溢出隐藏,css文本溢出隐藏出错了
weixin_36488589的博客
06-03 425
我设置的这个文本溢出隐藏。在正常宽度下可以正常显示。为什么窗口缩小后。文本的位置就变了呢？掉下去了我本来不想给文字加宽度的，但是如果不给宽度的话。文字直接就下去了。给了宽度后。至少正常宽度下。文字不会掉下去。但是治标不治本。我该把宽度写死吗？以后还想做响应式呢？如图：正常：缩小后：代码：class="question-image":src="item.imageList[0]":alt="item...
span标签溢出元素设置省略号
小僵尸打字员的博客
01-10 1万+
span 我一个写爬虫的也开始搞前端了,工作需要吗. 然后这次的遇到问题是我想把span标签的文本限定一下,让他到一定程度就展示省略号,然后就写了元素溢出的属性: overflow: hidden; text-overflow: ellipsis; 但是不成功,然后找原因,原来span标签为行内元素,必须要让他显示为块级元素才可以,加上属性: disp
span文字太长显示不下显示...
程序猿成长之路
03-12 6172
一定要为span设置宽度！！     width: 100%;     text-overflow: ellipsis;     white-space: nowrap;     overflow: hidden;
三个DIV块平行在一行显示
ly_solo的博客
04-03 8260
32%; height:100px; border:solid 1px red; float:left; margin-left:1%;"> 32%; height:100px; border:solid 1px yellow; float:left; margin-left:1%;">
css 文本溢出如何设置为省略号
最新发布
08-20
要将CSS文本溢出设置为省略号，你可以按照以下步骤进行操作: 1. 首先，你需要将文本强制显示在一行内，以防止换行。你可以使用CSS的`white-space: nowrap`属性来实现这一点。<span class="em">1</span><span class=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值