超出内容自动隐藏的css样式(超出内容自动隐藏的css样式怎么设置)

CSS中内容溢出自动隐藏的代码是？

这一效果的主要属性为：overflow。值：hidden！

这样就可以实现了！

例如：width:300px;height:150px;overflow:hidden;

表格宽300，高150。当表格中的内容超过这一设定值时，则自动隐藏！

如何通过CSS自动隐藏超出宽度的字不带省略号

.text-overflow {

display:block;/*内联对象需加*/

width:31em;

word-break:keep-all;/* 不换行 */

white-space:nowrap;/* 不换行 */

overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

}

扩展资料：

上面是不带省略号，反之显示省略号

!DOCTYPE html

html

head

title/title

meta charset="UTF-8"

meta name="viewport" content="width=device-width, initial-scale=1"

style

* {

margin: 0px;

padding: 0px;

}

#div1 {

width: 300px;

height: 300px;

background: red;

}

.pText {

display: block;

height: 30px;

width: 250px;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

.aText {

width: 100px;

white-space: nowrap;

}

/style

/head

body

div id="div1"

span

a空白会被浏览器保留。其行为方式类似 HTML 中的标签。/a

/span

/div

/body

/html

多行文本可以使用如下样式:

.intwoline {

display: -webkit-box !important;

overflow: hidden;

text-overflow: ellipsis;

word-break: break-all;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

}

若某个标签里的内容超过标签的尺寸,则超出的内容自动隐藏的CSS样式是什么？

overflow: hidden; 设置元素内容溢出隐藏。

overflow-y: hidden; 设置垂直溢出隐藏。

overflow-x: hidden; 设置水平溢出隐藏

html周考题2

一．单选题（共41小题，每题1.5分，共61.5分）

13、下面有关表格的说法正确的是（ C ）。

16、大多数表单元素都是使用（ A ）标签，然后通过type属性指定表单类型。

17、下面表单元素中，有value属性的是（ D ）。

18、单行文本框使用（ C ）实现，密码文本框使用（ D ）实现，多行文本框使用（ A ）实现。

19、如果想要定义单选框默认选中效果，可以使用（ A ）属性来实现。

20、在表单中，input元素的type属性取值为（ A ）时，用于创建重置按钮。

21、下面有关表单的说法，正确的是（ D ）。

22、下面对于按钮的说法，不正确的是（ D ）。

29、如果想要实现字体颜色为白色，可以使用定义color属性值为（ B ）。

30、下面有关字体样式，说法正确的是（ C ）。

31、下面选项中，属于CSS正确注释方式是（ B ）。

32、CSS使用（ C ）属性来定义段落的行高。

33、CSS使用（ A ）属性来定义字体下划线、删除线以及顶划线效果。

34、如果想要实现下图14-12所示的效果，我们可以使用（ C ）来实现。

[图片上传失败...(image-6c8f86-1537317883054)]

35、下面有关文本样式的说法中，正确的是（ B ）。

36、如果我们想要定义某一个元素的右边框，宽度为1px，外观为实线，颜色为红色，正确写法应该是（ C ）。

37、如果我们想要去掉某一个元素的上边框，下面写法中不正确的是（ A ）。

38、在真正实战开发中，对于下图所示的列表项符号，最佳实现方法是（C ）。

[图片上传失败...(image-862242-1537317883054)]

39、下面对于列表说法中，叙述错误的是（ A ）。

40、CSS可以使用（ C ）属性来合并表格边框。

41、下面有关表格样式，说法不正确的是（ C ）。

42、CSS可以使用（ B ）属性来实现图片水平居中。

43、下面有关图片样式，说法正确的是（ C ）。

44、CSS可以使用（A ）属性来设置文本颜色。

45、下面有关背景样式，说法不正确的是（ A ）。

46、下面哪一个伪类选择器是用于定义鼠标经过元素时样式的？（ C ）

47、在实际开发中，如果想要定义超链接未访问时的样式，可以使用（ A ）。

48、我们可以使用（ D ）来实现鼠标悬停在超链接上时为无下划线效果。

49、下面有关超链接样式说法中，正确的是（ A ）。

50、下面哪个属性用于定义外边距？（ D ）

51、下面有关CSS盒子模型的说法中，正确的是（ D ）。

52、如果一个div元素的上内边距和下内边距都是20px，左内边距是30px，右内边距是40px，正确的写法是（ B ）。

C. padding:20px 30px 40px; D.padding:40px 20px 30px 20px;

53、对于“margin:20px 40px;”，下面说法正确的是（ C ）。

54、默认情况下，（ A ）元素设置width和height可以生效。

55、如果想要实现文本环绕着图片，最好的解决方法是（ A ）。

56、在CSS中，“clear:both;”的作用是（ C ）。

57、下面有关浮动的说法中，不正确的是（ B ）。

58、我们可以定义position属性值为（B ），从而来实现元素的相对定位。

59、下面哪个属性不会让div元素脱离文档流？（ B ）

60、默认情况下，以下关于定位布局的说法不正确的是（ C ）。

61、下面有关定位布局，说法不正确的是（ D ）。

D. 在实际开发中，优先使用定位布局。如果实现不了，再考虑浮动布局

三、判断题（每题1.5分，共7.5分）

12.若某个标签里的内容超过标签的尺寸，则超出的内容自动隐藏的CSS样式是visibility:hidden （ 错 ）

13.在HTML中，将表单中input元素的type属性值设置为set时，用于创建重置按钮 （ 错 ）

14.在 HTML中,action属性用于设置表单要提交的地址 （对 ）

16.在HTML中创建一个隐藏域可以input name="hidden" value="hidden" text="111" （错 ）

18.transition-property 设置过渡的时间，transition-duration 设置过渡的属性（错 ）

四、简答题（4-6题6分，7题7分，共25分）

4 1、定义一个列表，每一个列表项都是一个超链接，并且要求去除列表项符号以及超链接下划线，超链接文本颜色为粉红色，并且点击某一个列表项会以新窗口的形式打开。

[图片上传失败...(image-aabb7b-1537317883044)]

div class =’title’

ul

lia href = ‘ ’target=’_blank’top1:百度/a/li

lia href = ‘ ’target=’_blank’top2:淘宝/a/li

lia href = ‘ ’target=’_blank’top3:新浪/a/li

lia href = ‘ ’target=’_blank’top4:网易/a/li

lia href = ‘ ’target=’_blank’top5:搜狐/a/li

/ul

/div

.total{ .total ul{ .total ul a{text-decorati0n:none;

List-style:none;}

Width:30px; color:pink;}

Height:400px;

Text-alian:center

}

5请将下图所示的图片当做背景图，要求铺满整个页面，不允许有空隙。

[图片上传失败...(image-2d6d42-1537317883042)]

Body{

Background-image:url(../image/1.png);

Background-repeat:repet

}

6在网页中添加一段文本链接，并且设置其在不同的状态下显示不同的效果。要求：

（1）未访问时：没有下划线，颜色为红色

（2）鼠标经过时：有下划线，颜色为蓝色

A:link{

Text-decoration:none;

Color:red

}

A:hover{

Color:blue;

Text-decoration：underline;

}

7 使用浮动布局来实现下图所示的页面布局效果，其中各个元素之间的间距是10px。下面只给出必要的尺寸，也就是说有些尺寸需要我们自己计算的。在实际开发中，计算尺寸是家常便饭，所以这里我们自己试一下。

[图片上传失败...(image-8d0a1c-1537317883041)]

div class=’total’

div class=’box1’/div

div class=’box2’/div

div class=’box3’/div

div class=’box4’/div

/div

.total{

Width:800px;

Height:800px;

Overflow:hidden

}

.box1{

Width:800px;

Height:100px;

}

.box2{

Width:595px;

Height:38-px;

Float:left;

}

.box3{

Width:195px;

Height:380px;

Float:left;

}

.box1{

Width:800px;

Height:100px;

}

五、论述题（每题6分，共6分）

1、在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，请说出三种解决方案：

CSS如何隐藏td里面超出的文字？

display:block;/*内联对象需加*/

width:31em;

word-break:keep-all;/* 不换行 */

white-space:nowrap;/* 不换行 */

overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

一般的文字截断（适用于内联与块）：

.text-overflow {

display:block;/*内联对象需加*/

width:31em;

word-break:keep-all;/* 不换行 */

white-space:nowrap;/* 不换行 */

overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

}

在标签中，想要实现文字超出就隐藏，CSS怎么写？

li style="overflow:hidden;"文字/li或者你li定义的样式里加上这个就可以了 . li{overflow:hidden;}