text-overflow属性的使用

text-overflow属性规定了当文本溢出包含元素时所发生的事情。

取值：

当遇到标题过长，影响页面效果的情况时，text-overflow属性发挥它的作用，如下图所示：

重点：利用text-overflow属性可以使标签内容在确定的长度内显示，剩余部分用“ … ”或者其他字符串代替。然而并不影响标签内部内容。

下面介绍text-overflow属性的做法

首先，书写布局

<div class="content"><img src="data:images/text-overflow1.webp" alt=""><div class="info">【送膜】UEU 苹果6s/6手机壳保护套硅胶磨砂全包防摔iPhone6 Plus 6/6S-经典黑-不漏标-4.7英寸</div>
</div>

然后，要对类名为info这个div设置一个宽度，并且设置overflow和white-space属性，并且overflow属性值必须为hidden，white-space属性必须为nowrap。（点击了解white-space属性）
最后，添加text-overflow属性即可。

.content {width: 170px;height: 200px;padding: 10px;border: 1px solid #ccc;
}
.info {width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;/*溢出部分用...省略号代替*/}

在上述代码中可以看到，使用了overflow属性和white-space属性。
其中：
1. white-space属性：用来设置如何处理元素内的空白，也可以来规定段落中的文本是否换行，它的值必须设置为nowrap，否则text-overflow属性失效。

2. overflow属性：规定当内容溢出元素框时发生的事情。

注意： text-overflow属性必须配合这两个属性一起使用才生效。

通过上述代码，效果图如下：

上图中，使用了text-overflow： ellipsis，使得超出元素盒子部分用“ … ”代替。

总结：一般情况下，text-overflow属性用于标题部分布局，并且在一行中显示。然而当复制标题内容时，内容是完整的。

text-overflow属性的使用相关推荐

Flutter开发之Text的overflow属性不生效（14）
我在使用 Text 控件时,由于文字太多,需要省略显示.设置 overflow: TextOverflow.ellipsis 没有效果,尾部显示还多了黄色相间的胶带色块.应该是:提示Text的布局边界 ...
CSS display overflow 属性 cursor光标类型
display属性功能:规则网页元素如何显示的问题. 取值:none(隐藏).block(以块元素显示).inline(以行内元素显示) block:可以实现将行内元素转成块元素. ...
java怎么设有滚动的标签,html标签overflow属性和javascript实现div标签滚动
原标题:html标签overflow属性和javascript实现div标签滚动昨天一个朋友说他实现了一个div循环滚动显示的demo,但是弄到jsp中就不滚动了,而且debug测试div的scro ...
前端：CSS/12/display属性，overflow属性，cursor光标类型，CSS定位，综合案例：今日闪价
display属性功能:规定网页元素如何显示: 取值:none(隐藏),block(以块元素显示),inline(以行内元素显示): block:可以实现将行内元素转换为块元素: inline:可以 ...
css overflow属性及使用方法（场景）
overflow这个属性还是挺实用的比如,一个div展示文字,想让超出部分隐藏就可以使用overflow:hidden,想让显示的画就用overflow:scroll; 1.overflow的属性值 ...
CSS overflow 属性
实例设置 overflow 属性: <html> <head> <style type="text/css"> div { backgroun ...
Overflow属性浅谈
Overflow属性定义了当元素溢出规定内容区域时所发生的事情.当一个元素固定为某个大小,在内容区放不下时,就可以用overflow来解决. 属性值:visible.hidden.scroll.aut ...
CSS Overflow属性详解(转)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容. 所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto .设置 textarea 对象此属 ...
CSS的overflow属性：显示隐藏滚动显示自动显示继承
overflow 属性规定当内容溢出元素框时发生的事情
CSS中的overflow属性
overflow属性如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条,是否隐藏溢出部分等行为,规定当内容溢出元素框时发生的事情. 可能的值有: visible ...

text-overflow属性的使用

text-overflow属性的使用

下面介绍text-overflow属性的做法

注意： text-overflow属性必须配合这两个属性一起使用才生效。

总结：一般情况下，text-overflow属性用于标题部分布局，并且在一行中显示。然而当复制标题内容时，内容是完整的。

text-overflow属性的使用相关推荐

最新文章

热门文章

text-overflow属性的使用

text-overflow属性的使用

下面介绍text-overflow属性的做法

注意： text-overflow属性必须配合这两个属性一起使用才生效。

总结： 一般情况下，text-overflow属性用于标题部分布局，并且在一行中显示。然而当复制标题内容时，内容是完整的。

text-overflow属性的使用相关推荐

最新文章

热门文章

总结：一般情况下，text-overflow属性用于标题部分布局，并且在一行中显示。然而当复制标题内容时，内容是完整的。