How to hide the excess part of html text-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to hide the excess part of html text

王林

Jun 21, 2021 am 10:13 AM

html letter

The way to hide the excess part of html text is to add the overflow attribute to the text box and set the attribute value to hidden, such as [overflow:hidden;]. hidden means that the content will be trimmed and the rest of the content will not be visible.

How to hide the excess part of html text

The operating environment of this article: windows10 system, html 5, thinkpad t480 computer.

Sometimes when we enter text in the text box, we will find that the part beyond the text box is missing, or becomes an ellipsis, that is, the part beyond the text box is hidden. So what should we do if we also want to achieve this effect? It's actually very simple, just use the overflow attribute. Let’s take a look at it together.

The overflow attribute specifies what happens if content overflows an element's box.

Attribute value:

visible Default value. The content will not be trimmed and will be rendered outside the element box.
hidden The content will be trimmed and the remaining content will be invisible.
scroll The content will be trimmed, but the browser will display scroll bars to view the remaining content.
#auto If content is trimmed, the browser displays scroll bars to view the remaining content.
inherit Specifies that the value of the overflow attribute should be inherited from the parent element.

The code example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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>
<h1>overflow 属性</h1>

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

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

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

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

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

</body>
</html>

Copy after login

If you are interested, you can save the above code to run locally and see the specific effect.

Related recommendations: html video tutorial

The above is the detailed content of How to hide the excess part of html text. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn