<!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; } ``` `...
父元素`#parent`设置了`height:50px`和`overflow:hidden`，期望限制子元素的高度并隐藏超出的部分。然而，由于`#child a`设置了`position:relative`，在IE6中，子元素的内容会超出父元素的高度限制，这违背了`...
综上，要使td元素中的文本超出部分隐藏，需要同时设置td的white-space属性为nowrap以及overflow属性为hidden，并且设置表格的table-layout属性为fixed。以下是一个具体的CSS代码示例： ```css table { width: *; /...
这个属性尤其适用于处理那些可能溢出的元素，比如长文本、表格、图片或者任何可能超出容器宽度或高度的内容。本教程将深入探讨“overflow”属性在HTML、JavaScript和CSS中的应用。 1. **CSS中的overflow属性** ...