html5怎麼實現隱藏剩餘顯示內容

html5實作隱藏剩餘顯示內容的方法：1、設定隱藏顯示的css樣式為「.hiddenMemo{width:100px;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;} 」；2.設定一下HTML實體顯示即可，程式碼為「

」。

本教學操作環境：Windows10系統、HTML5版、DELL G3電腦

html5怎麼實作隱藏剩餘顯示內容？

HTML5 CSS3之隱藏文字內容滑鼠懸停顯示所有

在我們進行網頁開發時出現有下列需求的時候，我們來看看怎麼才可以做到。

1.文字內容在一行或幾行顯示

2.限定當文字內容超出限制後隱藏顯示

3.用省略號取代隱藏內容

4.當滑鼠停留在隱藏文字內容上時，顯示所有內容。

第一步：設定隱藏顯示的css樣式

/*单行隐藏显示的样式设定*/
.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; /* 设置或检索伸缩盒对象的子元素的排列方式 */    
}

第二步：設定一下HTML實體顯示

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

第三步：用實例來看一下具體效果

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

上圖看看效果

單行隱藏顯示實例圖

#多行（2行）隱藏顯示實例圖

推薦學習：《HTML影片教學》

以上是html5怎麼實現隱藏剩餘顯示內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！