限制div高度当内容多了溢出时显示滚动条

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
 5     <title>限制div高度，内容多了显示滚动条</title>
 6     <style type="text/css">
 7         div{ border-radius:5px;border:1px solidred;padding:10px;}
 8         #test{min-height:250px;overflow-y:auto;max-height:300px;}
 9     </style>
10 </head>
11 <body>
12 <div>
13     <div id="test">
14         <table>
15             <tr><td>1</td></tr><tr><td>2</td></tr>
16             <tr><td>3</td></tr><tr><td>4</td></tr>
17             <tr><td>5</td></tr><tr><td>6</td></tr>
18             <tr><td>7</td></tr><tr><td>8</td></tr>
19             <tr><td>9</td></tr><tr><td>10</td></tr>
20             <tr><td>5</td></tr><tr><td>6</td></tr>
21             <tr><td>7</td></tr><tr><td>8</td></tr>
22             <tr><td>9</td></tr><tr><td>10</td></tr>
23         </table>
24     </div>
25 </div>
26 </body>
27 </html>

主要是overflow-y：auto属性的添加

时间： 2024-11-05 01:50:43

限制div高度当内容多了溢出时显示滚动条的相关文章

Textarea高度随内容自适应地增长，无滚动条

<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>枫芸志 » 文本框textarea高度自适应增长/伸缩</TITLE> </HEAD> <BODY> <textarea id="txtContent" rows="5&q

CSS 文本溢出时显示省略标记

如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Typ

【UWP】仅在TextBlock文本溢出时显示Tooltip

原文:[UWP]仅在TextBlock文本溢出时显示Tooltip 前言这是我今天在回答SO问题时偶然遇到的,觉得可能还比较通用,就记录下来以供参考. 通常,我们使用ToolTip最简单的方式是这样: <TextBlock Text="Test" ToolTipService.ToolTip="Test" /> 这样在光标悬浮在TextBlock上方时,会显示一个提示条,但是这似乎又违背了一个设计原则: ToolTip作为提示,应该仅在当前内容显示不全

css 内容溢出显示垂直滚动条，内容不超出就不显示滚动条

<div class="div1"> 前端开发者前端开发者前端开发者前端开发者前端开发者 </div> css代码: .div1{ width:200px; height:100px; overflow-y:auto; }

文本溢出时显示省略号

效果如图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0;"> <title>test</title> <style> .test{ width:200px

当文本溢出时显示为省略号

当元素设置固定宽度之后,如果元素内的文本超出宽度之后将其设置为省略号效果的方法: text-overflow 属性规定当文本溢出包含元素时发生的事情. 语法 text-overflow: clip|ellipsis|string; 值描述 clip 修剪文本. ellipsis 显示省略符号来代表被修剪的文本. string 使用给定的字符串来代表被修剪的文本. white-space 属性设置如何处理元素内的空白. 可能的值值描述 normal 默认.空白会被浏览器忽略. p

当div元素内的内容超出其宽度时，自动隐藏超出的内容

word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与 overflow:hidden;一起使用.*/

css text-overflow溢出文本显示省略号

<div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象内文本溢出时显示省略标记</nobr></div> 语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...)

新公司入职第一天遇到的关于 CSS 单行溢出文本显示省略号...的问题

上班第一天前端岗位,因为公司这个项目是标准开发所以没法用框架在打架页面,好吧我手写各种div 各种css样式好不忧伤,好吧不废话了进入正题. 想在导航栏中的客户信息功能点实现溢出用‘...’来代替, 我一想这简单啊只要给div加上text-overflow:ellipsis;属性就好了呗, 结果怎么调也不行,你说把我压抑的啊经过一阵查终于找到原因出在哪里里原来text-overflow:ellipsis;的属性得需要另外两个属性的配合才能实现这俩分别是 over