How to hide the remaining display content in html5

html5 Method to hide the remaining displayed content: 1. Set the css style of the hidden display to ".hiddenMemo{width:100px;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;} "; 2. Just set the HTML entity display, the code is "

".

The operating environment of this tutorial: Windows 10 system, HTML5 version, DELL G3 computer

How to hide the remaining displayed content in html5?

HTML5 CSS3 hidden text content shows all when mouse hovers

When we have the following requirements when developing web pages, let's take a look at how we can do it.

1. Display the text content in one or several lines

2. Limit the text content to be hidden and displayed when it exceeds the limit

3. Use ellipsis to replace the hidden content

4. When the mouse hovers over the hidden text content, show all content.

The first step: Set the css style of the hidden display

/*单行隐藏显示的样式设定*/
.hiddenMemo{
width:100px;    /*设置隐藏显示的最大宽度*/
  white-space:nowrap;  /* 设置文字在一行显示，不能换行 */  
  overflow: hidden;    /* 文字长度超出限定宽度，则隐藏超出的内容 */
  text-overflow: ellipsis;/* 规定当文本溢出时，显示省略符号来代表被省略的文本 */
}

/*多行隐藏显示的样式设定*/
.hiddenMemo {      
width:50px;/*设置隐藏显示的最大宽度*/
  overflow: hidden;/* 文字长度超出限定宽度，则隐藏超出的内容 */
  text-overflow: ellipsis;
  display: -webkit-box;     /* 将对象作为弹性伸缩盒子模型显示 */      
  -webkit-line-clamp: 2;    /* 控制最多显示几行，这里采用最多显示两行 */      
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */    
}

The second step: Set up the HTML entity display

<div class=&#39;hiddenMemo&#39; 
title=&#39;鼠标悬停在文本上时就会显示title的属性值&#39;>
超过宽度限制就会隐藏的文本内容
</div>

The third step: Use an example to see the details Effect

<h2>举个栗子吧</h2>
<div class=&#39;hiddenMemo&#39; 
title=&#39;我叫李华，今年18岁，你的外国朋友Petter要来中国北京，请你给他介绍一下北京。&#39;>
我叫李华，今年18岁，你的外国朋友Petter要来中国北京，请你给他介绍一下北京。
</div>

Look at the effect in the picture above

Single-line hiding and displaying example picture

Multi-line (2 lines) hiding and displaying example picture

Recommended study: "HTML video tutorial"

The above is the detailed content of How to hide the remaining display content in html5. For more information, please follow other related articles on the PHP Chinese website!