`

css样式中的省略显示

 
阅读更多 
	<style>
			 .test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}
			  .test_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}			
		</style>
	</head>
	<body>
		<!--省略号的方式显示文本-->
		<div class="test_demo_clip">
			不省略显示abcedfsafsafaaabcedfsafsafaaabcedfsafsafaaabcedfsafsafaaabcedfsafsafaaabcedfsafsafaaabcedfsafsafaa
		</div>
		<div class="test_ellipsis">
			省略显示abcedfsafsafaaabcedfsafsafaaabcedfsafsafaaabcedfsafsafaaabcedfsafsafaaabcedfsafsafaaabcedfsafsafaa
		</div>
 

注意：(

text-overflow:ellipsis; overflow:hidden; white-space:nowrap;

)这三个属性一定要一起使用。

分享到：
| javascript基础知识
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css文本显示省略号样式文件

    css文本显示省略号 如果不适应sass 需要把@extend .text-webkit-box替换为.text-webkit-box里面的内容

    如何通过CSS样式设置单元格显示内容的长度.doc

    当内容过长，我们不希望它完全显示，而是希望通过CSS样式将其截断，并用省略号表示被隐藏的部分。本文将详细介绍如何通过CSS样式实现这一功能，同时结合`table-layout`属性来优化表格的布局性能。 首先，`table-...

    前端样式 分页中间是省略号

    在“1-中间两个省略号”这个文件中，可能包含了实现这一特定分页样式的代码示例，包括HTML模板、CSS样式表和可能的JavaScript代码。通过分析和学习这个文件，开发者可以理解如何在自己的项目中实现类似的功能，或者...

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

    2. **编写CSS样式**：接下来，为该元素添加必要的CSS样式以实现文本截断效果。 ```css .ellipsis-container { width: 200px; /* 设置容器宽度 */ overflow: hidden; white-space: nowrap; text-overflow: ...

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

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

    CSS+DIV编写经验总结之CSS样式小模板

    - **作用**：当内容超出容器宽度时，自动隐藏超出部分并显示省略号。 - **应用场景**：适用于导航栏、列表项等需要限制文字长度的场景。 #### 总结 通过以上对CSS+DIV编写经验总结之CSS样式小模板的解析可以看出...

    通过css样式控制单元格文本超长省略.doc

    本文将详细讲解如何通过CSS样式来控制单元格中的文本，当文本内容超过单元格宽度时，采用省略号的形式来表示被截断的部分。这个技巧在数据展示、列表视图或者表格中尤其有用，可以有效地防止单元格过宽导致布局混乱...

    CSS实现文字多行省略效果.zip_朋友圈文字最后变成省略号

    在给定的“CSS实现多行文字显示省略号效果.zip”压缩包中，包含了一个名为“2.css”的样式表文件，它使用了`-webkit-line-clamp`属性来指定省略的行数，以及一个“1.html.txt”的HTML文件，用于展示这个效果。...

    HTML+css 超出字符省略号表示

    以下是一个基本的CSS样式示例： ```css #ellipsis-text { width: 200px; /* 设置一个固定的宽度，或者你可以使用max-width */ overflow: hidden; /* 隐藏超出容器的内容 */ text-overflow: ellipsis; /* 当内容...

    CSS样式 解决文字过长显示省略号问题

    一、CSS样式 解决文字过长显示省略号问题 1、一般样式 　一般 css 样式，当宽度不够时，可能会出现换行的效果。这样的效果在某些时候肯定是不行的，可以修改 css 样式来解决这个问题。 &lt;!DOCTYPE html&gt; &lt;...

    网页中字段太长，省略号表示。css显示

    CSS中的`text-overflow`属性和`overflow`属性配合`white-space`属性可以实现文本的省略号显示。默认情况下，当`overflow`设置为`hidden`时，超出容器宽度的文本会被隐藏；而`text-overflow`属性则决定如何显示被隐藏...

    一些常用的css样式问题

    常用的CSS样式解决方案 CSS（Cascading Style Sheets）是网页样式的...本文总结了一些常用的CSS样式问题，包括居中方式、弹性布局、文本和图片水平居中对齐、滚动条样式、省略号显示等，希望对前端开发者有所帮助。

    css样式代码

    在网页设计领域，CSS（Cascading Style Sheets）是一种至关重要的技术，用于定义网页内容的样式、布局和呈现方式。本教程将深入讲解如何利用CSS提升网页设计的效率和美观度。 首先，我们关注到一个关于导航栏的样式...

    css实现文本溢出显示省略号

    总结来说，通过上述几个CSS属性的组合使用，开发者可以控制网页中的文本在溢出时优雅地显示省略号，从而使页面布局更加美观和整洁。这对于创建响应式网页设计尤为重要，可以确保在不同屏幕尺寸和设备上的用户体验。...

    css 分页样式 sdkstudy

    在分页设计中，CSS可以控制分页按钮的大小、形状、颜色、边框、间距以及悬停和激活状态的样式。 1. **分页布局**：CSS可以用来设置分页的位置，比如将其置于页面底部居中，或者固定在侧边。这通常通过使用`position...

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

    标题和描述中提到的“CSS省略号text-overflow超出溢出显示省略号”是指在CSS样式中利用`text-overflow: ellipsis;`来实现当文本内容超出指定容器的宽度时，用省略号表示被截断的文本。 `text-overflow`属性有以下几...

    CSS--文本溢出完美样式

    在网页设计中，CSS（Cascading Style Sheets）起着至关重要的作用，它允许我们对网页的布局和样式进行精细控制。"CSS--文本溢出完美样式"这一主题聚焦于解决一个常见的问题：当文本内容过多，超出其容器的边界时，...

    css样式表使用技巧

    CSS样式表是网页设计中用于控制页面布局和视觉表现的重要工具。以下是基于标题和描述的10个关键CSS技巧，帮助你提升网页的美观度和专业性。 1. CSS字体简写规则： 当定义字体样式时，可以使用简写形式，如`font: 1...

    css把超出的部分显示为省略号的方法兼容火狐

    标题中的“css把超出的部分显示为省略号的方法兼容火狐”是指在CSS样式中，如何设置文本超出指定宽度时显示省略号，并确保这种方法在Firefox浏览器中也能够正常工作。这种技术通常用于限制长文本在有限的空间内展示...

Magicbox
Global site tag (gtag.js) - Google Analytics