Home > Article > Web Front-end > How to hide css font overflow

How to hide css font overflow

青灯夜游Original: 2021-07-05 16:24:383396browse

You can use the overflow attribute in css to achieve the font overflow hiding effect. You only need to add the "overflow: hidden;" style to the label element that wraps the font. The overflow attribute is used to control what happens when content overflows the element box. When the value is set to "hidden", the overflow part is not visible.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can use the overflow attribute to achieve the font overflow hiding effect.

The following is a code example to introduce how the overflow attribute implements font overflow hiding

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#overflowTest {
    background: #4CAF50;
    color: white;
    width: 80%;
    height: 140px;
    overflow: hidden;
    border: 1px solid #ccc;
}
</style>
</head>
<body>

<div id="overflowTest">
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
</div>

</body>
</html>

Rendering:

How to hide css font overflow

##overflow attribute Used to control what happens when content overflows the element box. When the value is set to "hidden", the content is trimmed and the rest of the content is invisible, that is, the overflow part is hidden.

Note: The overflow attribute only works on block elements with a specified height.

(Learning video sharing:

css video tutorial)

The above is the detailed content of How to hide css font overflow. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：what is css paddingNext article：what is css padding

See more

How to hide css font overflow

Related articles