html文字超出部分怎麼隱藏-html教學-PHP中文網

首頁

web前端

html教學

html文字超出部分怎麼隱藏

王林

Jun 21, 2021 am 10:13 AM

html 信

html文字超出部分隱藏的方法是，為文字方塊新增overflow屬性，並且設定屬性值為hidden即可，例如【overflow:hidden;】。 hidden表示內容會被修剪，其餘內容不可見。

html文字超出部分怎麼隱藏

本文操作環境：windows10系統、html 5、thinkpad t480電腦。

有時我們在文字方塊中輸入文字時，會發現超出文字方塊的部分不見了，或者是變成了省略號，即文字超出部分隱藏。那如果我們也想要實現這種效果，該怎麼做呢？其實很簡單，只需要藉由overflow屬性即可。下面就讓我們一起來看吧。

overflow屬性指定如果內容溢出一個元素的框，會發生什麼事。

屬性值：

visible 預設值。內容不會被修剪，會呈現在元素框外。
hidden 內容會被修剪，且其餘內容是看不見的。
scroll 內容會被修剪，但是瀏覽器會顯示捲軸以便查看其餘的內容。
auto 如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。

程式碼範例如下：

<!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>

登入後複製

大家如果有興趣，可以將上面的程式碼儲存到本地運行，看看具體的效果。