`
zhuhuide2004
  • 浏览: 143899 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

不换行显示省略标记(...)

阅读更多

------------------------

 

语法:
 
text-overflow : clip | ellipsis
 
参数:
 
clip :  不显示省略标记(...),而是简单的裁切
ellipsis :  当对象内文本溢出时显示省略标记(...)
 
说明:
 
设 置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
对应的脚本特性为textOverflow 。请参阅我编写的其他书 目。

 

------------------------

 

要实现溢出时产生省略号的效果,还必须定义:

1 强制文本在一行内显示(white-space:nowrap)

2 溢出内容为隐藏(overflow:hidden)。

 

------------------------

示例:

<table class="layout_fixed" border="1"  width="600">
      	<colgroup>
		<col width="200" >
        <col width="100" >
        <col width="100" >
        <col width="80" >
		<col width="300">
	</colgroup>

  <tr>
    <td style="white-space:nowrap; text-overflow:ellipsis; overflow:hidden;">
		目的:①页面宽变大时,按钮跟页面右侧边始终保持一定距离
	</td>
    <td style="text-overflow:ellipsis; overflow:hidden;">
		<span style="white-space:nowrap;">
			fasdgrewqhqerqwerqw我的系统没有问题你
		</span>
	</td>
    <td style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
		<span>
			fasdgrewqhqerqwerqw我的系统没有问题你
		</span>
	</td>
    <td nowrap>我的系统没有问题你</td>
    <td nowrap></td>
  </tr>
</table>
分享到:
评论

相关推荐

    文本溢出时显示省略标记

    这是一段很长的文本,可能会溢出它的容器,所以我们需要在文本溢出时显示省略标记... ``` 如果需要显示多行文本的省略效果,CSS3提供了一个新的属性 `text-overflow: -o-ellipsis-lastline`,但这在某些浏览器中...

    让超出DIV宽度范围的文字自动显示省略号...

    - `clip`:当对象被裁剪时,不显示任何内容。 - `ellipsis`:当对象被裁剪时,显示省略号(`…`)来表示被裁剪的文本。 - **语法**: ```css .element { text-overflow: ellipsis; } ``` - **示例**: ```...

    VC++ List标题栏自动换行代码

    首先,我们需要知道,标准的MFC ListView控件不直接支持标题栏的自动换行。默认情况下,如果标题过长,它会被截断并显示省略号。为了解决这个问题,我们可以扩展ListView控件,创建一个自定义的Header控件。 这个...

    标题长度溢出时,自动显示为省略“...”的Css text-overflow

    如果元素宽度太窄,即使设置了nowrap,文本还是会换行显示,因此要确保元素宽度足够容纳文本或者文本足够长到即使不换行也无法在元素宽度内显示完毕。 除此之外,overflow属性需要被设置为hidden、scroll或者auto中...

    纯css控制超出部分省略号显示

    `**:此属性用于指定当内容被裁剪时是否显示省略标记(...)。设置为`ellipsis`表示内容被裁剪时显示省略号。 5. **`-o-text-overflow:ellipsis;`**:这是一个Opera浏览器专用的前缀属性,作用与`text-overflow`相同...

    CSS实现限制字数功能当对象内文本溢出时显示省略标记

    上述代码会裁剪超出容器的文本,不显示省略号。 ```css text-overflow: ellipsis; ``` 这段代码则会在文本溢出时显示省略号。 然而,仅仅设置 `text-overflow` 属性是不够的,还需要配合其他 CSS 属性来实现预期的...

    css控制文本实现越界省略号以及自动换行

    /* 当对象内文本溢出时显示省略标记 */ } ``` 这样,表格的每一列都将保持固定宽度,当单元格内的文本超出时,会显示省略号。 总结来说,CSS中的`text-overflow: ellipsis`、`overflow: hidden`和`white-space: ...

    ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏

    - `clip`:不显示省略标记,而是简单地裁切超出的部分。 - `ellipsis`:当对象内的文本溢出时,显示省略标记(...)。 2. `overflow` 属性: `overflow` 控制当内容溢出元素框时发生的事情。在这里,我们使用 `...

    css样式显示省略号自定义宽度超过隐藏显示省略标记

    在CSS样式中,显示省略号并自定义宽度超过时隐藏部分内容是一种常见的文本处理方法,主要用于长文本在有限空间内的展示。这个技巧可以帮助我们在网页设计中优化布局,保持页面整洁,尤其是在显示标题、摘要或者评论...

    使用CSS不用程序实现文字自动截断 用省略号代替

    text-overflow属性可以设置为ellipsis,该属性将在对象内文本溢出时显示省略标记(...)。同时,我们还需要使用white-space属性将文本限制在一行内显示所有文本。white-space属性可以设置为nowrap,以便文本不换行。...

    一行文字超过div宽度的时如何让它不换行

    当一行文字超过div宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行显示那要怎么办呢? 我想大家首先想到的办法就是用截断文字加“…”的做法。... /* 当对象内文本溢出时显示省略标记(…) ;需与o

    强制文本在一行内显示,并且后面有省略号效果的实现方法

    `text-overflow`属性是用来设置当文本溢出其容器时,是否显示一个省略标记(...)。这个属性本身并不直接控制文本的布局或显示,它只是起到一个提示作用。例如: ```css text-overflow: ellipsis; ``` 当设置为`...

    CSS 网页内容换行控制

    要使`text-overflow: ellipsis`生效,通常需要配合`white-space: nowrap`和`overflow: hidden`,这样可以创建一个简洁的省略标记,同时隐藏超出的文本内容。 其次,`word-break`属性控制单词内部的换行行为,特别是...

    css自动截取指定长度字符串,结尾显示... 支持FF浏览器

    - `ellipsis`:当对象内文本溢出时,在文本末尾显示省略标记(...)。 - **`overflow`**:规定当元素内容溢出其区域时发生的事情。 - `hidden`:隐藏溢出的内容。 - **`width`**:定义元素的宽度。 - **`:after`**...

    CSS省略号text-overflow超出溢出显示省略号

    - `clip`:默认值,不显示省略标记,而是简单地裁剪超出的内容。 - `ellipsis`:当对象内的文本溢出时,显示省略号(…)。 2. **应用条件**: 要使`text-overflow: ellipsis;`生效,通常还需要配合以下CSS属性...

    CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

    - `text-overflow`: 此属性定义当文本溢出包含元素时如何显示省略标记(即省略号)。有效值包括 `clip`(修剪文本),`ellipsis`(显示省略号来代表被修剪的文本),和 `string`(使用给定的字符串来代表被修剪的...

Global site tag (gtag.js) - Google Analytics