`
bolinyang
  • 浏览: 75346 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

HTML的a标签中文本超出一定宽度之后的截断样式

css 
阅读更多
一.概述

在写HTML页面的时候经常会用到a标签，注意href属性，a标签要是没有href属性，其hover效果就不会在IE系列的浏览器中出现，如果点击后没有页面跳转，一般需要把href设置为javascript:;。在讨论页面的时候要考虑一些文本的截断处理，同时在编写HTML代码的时候也需要考虑一下文本会不会超出既定的宽度，这样才能产出漂亮的页面。

二.a标签截断时的CSS 

display:block;
overflow:hidden;
text-overflow:ellipsis; /** 超出宽度显示为......**/
white-space:nowrap;/* 不换行 */
分享到：
| 2013年中国数据库大会PPT
评论
发表评论

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

相关推荐

    Html内容超出标记宽度后自动隐藏

    首先，我们可以使用`<span>`标签来包裹需要限制宽度的文本，然后通过CSS来控制其行为。`<span>`是内联元素，它默认会遵循周围的文本流，但我们可以将其转换为类似块级元素的行为，以便设置宽度限制。 ```css span {...

    用css使单行超出指定宽度的内容切去并在结尾出现省略号

    在IE浏览器中，我们可以直接使用以下CSS来实现单行文本超出宽度后添加省略号的效果： ```css span { width: 200px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ...

    Css测试，li超出部分的汉字隐藏

    在CSS（层叠样式表）中，处理元素超出部分的隐藏是一个常见的需求，尤其是在文本布局或者列表项目（如li）的展示中。标题"Css测试，li超出部分的汉字隐藏"提示我们，这个话题主要关注如何在CSS中控制`<li>`元素内的...

    Html长文本超出标记宽度后自动截取实现代码

    在网页设计中，有时我们需要对长文本进行处理，使其在有限的宽度内显示，并且当内容超出指定宽度时能够自动截取。这通常涉及到CSS（层叠样式表）的运用，特别是与文本溢出处理相关的样式规则。以下将详细介绍如何...

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

    本主题主要探讨如何利用HTML和CSS实现超出字符数后显示省略号的效果。 首先，HTML中的基础结构是至关重要的。我们可以使用`<p>`、`<span>`或`<div>`等元素来包含需要截断的文字。例如，创建一个包含长文本的`<p>`...

    固定宽度表格布局设定宽度问题

    `overflow: hidden`隐藏超出单元格的内容，`text-overflow: ellipsis`添加省略号表示内容被截断，`white-space: nowrap`则阻止文本换行，以保持单元格的宽度不变。 在实际开发中，我们还可能遇到跨浏览器兼容性问题...

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

    这是一段很长很长的文本，如果它超出了容器的宽度就会被截断并显示省略号。 ``` 2. **编写CSS样式**：接下来，为该元素添加必要的CSS样式以实现文本截断效果。 ```css .ellipsis-container { width: 200px...

    个性标签label

    在本案例中，"个性标签label"的描述提及了两个关键点：标签宽度的动态调整以及多标签的自动换行。这两个特性在UI设计和前端开发中具有重要的实践意义。 首先，我们来详细了解一下动态调整宽度这一概念。在传统的...

    移动端内容超出

    1. **媒体查询**：CSS3的媒体查询允许我们根据设备的特定特性（如视口宽度）应用不同的样式。例如，可以设置在小屏幕设备上隐藏某些元素或调整它们的布局。 ```css @media (max-width: 600px) { .content { ...

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

    在浏览器中，运行代码后， div元素将显示为一个红色边框，宽度为200px，高度为50px的框架，并且文字将被截断，显示省略号代替超出对象宽度的内容。这样，就实现了文字自动截断，用省略号代替超出对象宽度的内容。 ...

    JEECMS3.x模板标签使用说明

    ### JEECMS3.x模板标签使用说明 #### 页面处理时间标签 **标签示例：** `[@process_time/]` 此标签用于展示当前页面的加载处理时间。它可以帮助开发者和管理员了解页面加载速度，并据此优化系统性能。 #### 页面...

    CSS超出文本指定宽度用省略号代替和文本不换行

    /* 隐藏超出宽度的内容 */ text-overflow: ellipsis; /* 当内容溢出时显示省略号 */ } ``` 这组样式组合在一起，可以确保文本在设定的宽度内显示，超出部分被隐藏，并用省略号（...）表示。`word-break: keep-...

    table 中，如何使得单元格的内容不换行，单元格不被撑开，显示不下的时候在结尾处显示“...”

    在网页设计中，经常需要处理表格（table）的布局问题，特别是当单元格（cell）内的文本内容过长时，如何保持单元格的固定宽度，不让内容换行，并在显示不下的情况下添加省略号（"..."）表示内容被截断。这涉及到CSS...

    截断ASP.NET中的文本字符串以适合给定的像素宽度

    综上所述，截断ASP.NET中的文本字符串以适应特定像素宽度，需要结合C#编程、CSS样式以及可能的JavaScript技术。具体实现取决于你的项目需求，例如是否需要考虑多语言、是否需要保留截断文本的完整性和可点击性等。在...

    固定宽度下拉列表select中option内容显示不全问题解决方法

    然而，在某些情况下，特别是在固定宽度的`<select>`元素中，如果`<option>`的内容过长，可能会导致内容显示不全，只显示部分内容或者超出边界。这种问题会给用户带来不便，因为他们可能无法清楚地看到所有可选项。...

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

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

    JSP中的点点样式

    在JavaServer Pages（JSP）中，"点点样式"通常指的是处理页面内容超出容器显示范围时的一种视觉提示方式。这种样式设计允许用户知道内容是被截断的，并且有更多未显示的信息。在网页设计中，我们常常会遇到一些情况...

    CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现

    在本篇文档中，我们将深入学习如何使用CSS控制文本的显示方式，具体来说是如何实现当文本超出指定宽度时，在文本的末尾显示省略号，并且文本不换行。这种效果在网页设计中非常常见，它能够帮助我们优雅地处理那些...

    爱码哥平台：原生控件-label标签

    - **maxlines**: 设置文本的最大行数，超出部分将被截断，默认不限制。 - **copyable**: 是否允许通过长按复制文本内容。 - **face**: 是否显示文字中的表情符号。 - **onclick**: 触发点击事件时执行的...

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