html隐藏文字超出部分的方法

这篇文章主要介绍“html隐藏文字超出部分的方法”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“html隐藏文字超出部分的方法”文章能帮助大家解决问题。

成都创新互联专注于黄平网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供黄平营销型网站建设，黄平网站制作、黄平网页设计、黄平网站官网定制、小程序定制开发服务，打造黄平网络公司原创品牌,更为您提供黄平网站排名全网营销落地服务。

html文字超出部分隐藏的方法是，给文本框添加overflow属性，并且设置属性值为hidden即可，例如【overflow:hidden;】。hidden表示内容会被修剪，并且其余内容不可见。

本文操作环境：windows10系统、html 5、thinkpad t480电脑。

overflow属性指定如果内容溢出一个元素的框，会发生什么。

属性值：

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

代码示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>创新互联(php.cn)</title> 
<style>
div.ex1 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: scroll;
}

div.ex2 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: hidden;
}

div.ex3 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: auto;
}

div.ex4 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: visible;
}
</style>
</head>
<body>
<h2>overflow 属性</h2>

<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<h3>overflow: scroll:</h3>
<div class="ex1">创新互联提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</div>

<h3>overflow: hidden:</h3>
<div class="ex2">创新互联提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</div>

<h3>overflow: auto:</h3>
<div class="ex3">创新互联提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</div>

<h3>overflow: visible (默认):</h3>
<div class="ex4">创新互联提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</div>

</body>
</html>

关于“html隐藏文字超出部分的方法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。

网页题目：html隐藏文字超出部分的方法
转载来源：https://www.cdcxhl.com/article6/jcceog.html

成都网站建设公司_创新互联，为您提供品牌网站设计、商城网站、App开发、网站排名、服务器托管、标签优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容