<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0px; margin:0px;}
.d1{width:600px;float:left; display:inline;border:1px solid #CC3300;}
.d1 dl{float:left;width:600px;}
.d1 dl dd{width:299px;float:left;height:23px;line-height:23px;margin-top:10px;display:inline; overflow:hidden;}
.d1 dl dd span{float:left;width:90px;height:23px;line-height:23px; background-color:#003333; color:#FF0000; text-align:center;}
.d1 dl dd em{ float:right;display:block;width:200px; margin-top:2px;}
</style>
</head>
<body>
<div class="d1">
<dl>
<dd><span>姓名:</span><em>cyf</em><em><select> <option>sss</option> </select> </em> </dd>
<dd><span>性别:</span><em>nan</em><em><select> <option>sss</option> </select> </em></dd>
<dd><span>年龄:</span><em><select> <option>sss</option> </select> </em> </dd>
<dd><span>工资:</span><em><select> <option>sss</option> </select> </em></dd>
</dl>
</div>
</body>
</html>
使用overflow: hidden的前提,我想两个标签都应该代表块状的,想span,em本身是行内元素,只能通过display:block 和float:left;强制转换成块,又强制性的在一行,overflow: hidden,使得超出dd宽度的em元素自动隐藏
分享到:
相关推荐
其中,`overflow: hidden` 是一个非常实用且常见的设置值,它可以有效地隐藏超出容器范围的内容,从而避免页面出现不必要的滚动条或变形。 #### 一、`overflow: hidden` 的基本概念 `overflow` 属性用于指定当元素...
当`overflow:hidden`被应用到一个元素上时,任何超出元素边框的内容都将被隐藏,不再可见。这可以用来防止内容溢出并保持布局的整洁。同时,`overflow:hidden`还可以带来一些额外的效果,如创建纯CSS的滚动条或者与`...
1. **非换行的行内元素宽度超出容器宽度**:如果一个行内元素(如`<span>`或`<p>`)的宽度超过了其父元素的宽度,且没有自动换行,`overflow:hidden`将无法隐藏超出的文本。 2. **固定宽度的块级元素在窄容器内**:...
在这个例子中,由于`.div`的高度为100px,而内部的内容高度超过了这个限制,因此超出的部分(通常是下半部分)被隐藏了。 #### 示例2:隐藏滚动条 ```html ; height: 100px; overflow: hidden;"> <div>1 <div>2 ...
我们在IE 6内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden。 解决这个bug很简单,在父元素中使用position:relative;即可解决该bug 我的办法:子元素设置绝对定位,父元素相对定位,这样...
`可以隐藏超出元素边框的所有内容。对于`<li>`元素,这会使得超出部分的汉字不显示。 ```css li { overflow: hidden; } ``` 2. **text-overflow** 属性:配合`overflow`属性使用,`text-overflow: ellipsis;`可以...
3. hidden:此值会隐藏超出元素尺寸的内容,不会显示滚动条,也不会提供内容的滚动视图。如果需要让用户知道有内容被隐藏,通常会与white-space: nowrap;一起使用,并在溢出位置显示省略号(...)。 4. scroll:此...
overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了...
"overflow:hidden"则是这个属性的其中一个值,它能够隐藏超出元素设定范围的内容,并且不提供滚动条,从而使得溢出的内容不会显示在元素框的外部。 1. 暴力清除浮动 在CSS中,浮动(float)是一种重要的布局方式,...
当元素的内容超出了其指定的区域时,`overflow:hidden` 可以用来隐藏这些溢出的内容。例如,当一个父容器有一个固定高度,如 `height: 500px`,并且它的子元素高度超过了这个限制,`overflow:hidden` 将确保超出...
这是因为`overflow:hidden`属性的作用是隐藏超出元素边界的任何内容,这同时也会影响到`list-style`。 `list-style`属性允许我们设置列表项的显示方式,包括项目符号类型、图片以及项目符号的位置。例如: - `disc...
`overflow`属性是CSS中的一个基本属性,它可以控制当内容超出元素框时如何处理内容。`overflow`属性有四个可能的值: 1. `visible`:默认值,超出的内容会显示出来。 2. `hidden`:超出的内容会被裁剪,且不会提供...
2. 隐藏溢出内容:在某些设计中,可能需要隐藏超出元素边界的元素,此时设置`overflow: hidden`即可。 3. 自适应布局:配合CSS Flexbox或Grid布局,`overflow`可以帮助调整内容的展示方式,如响应式设计中隐藏或显示...
`div overflow`超出隐藏属性是CSS中用于控制元素内容溢出时的表现方式。这个属性主要应用于容器元素,当内部内容的尺寸超过容器的边界时,`overflow`属性可以帮助我们管理这些溢出的内容。 1. `overflow`属性设置:...
当设置 `overflow` 为 `hidden` 时,元素的内容会被修剪,且不会出现滚动条,这通常用于隐藏溢出的内容或者防止用户看到不应该看到的部分。然而,在某些特定情况下,尤其是在旧版本的Internet Explorer(如IE8)中,...
`text-overflow`属性是CSS中用于处理文本溢出的一种解决方案,它允许我们控制超出元素边界时的文本显示方式。本文将详细介绍在Firefox下如何完美解决文本溢出的问题,并提供相关的解决方案。 首先,我们需要理解`...
这将隐藏超出容器宽度的部分,确保内容不会破坏页面布局。 为了让用户意识到有被隐藏的内容,可以使用`text-overflow: ellipsis`属性来添加省略号表示被截断: ```css span { text-overflow: ellipsis; } ``` `...
`overflow:hidden`常用来隐藏超出容器边界的元素内容,以保持设计的整洁性。 问题在于,当父元素设置了`overflow:hidden`,而子元素设置了`position:relative`,在某些版本的IE浏览器(特别是IE6和IE7)中,`...
父元素`#parent`设置了`height:50px`和`overflow:hidden`,期望限制子元素的高度并隐藏超出的部分。然而,由于`#child a`设置了`position:relative`,在IE6中,子元素的内容会超出父元素的高度限制,这违背了`...
综上,要使td元素中的文本超出部分隐藏,需要同时设置td的white-space属性为nowrap以及overflow属性为hidden,并且设置表格的table-layout属性为fixed。以下是一个具体的CSS代码示例: ```css table { width: *; /...