`

li与div自动截断过长文本

XHTMLHTML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
li {
 width:200px;
 white-space:nowrap;
 text-overflow:ellipsis;
 -o-text-overflow:ellipsis;
 overflow: hidden;
 }
div {
 width:200px;
 white-space:nowrap;
 text-overflow:ellipsis;
 -o-text-overflow:ellipsis;
 overflow: hidden;
 }

-->
</style>
<ul>
<li><a href="#">w3c-标准网页组件库w3c-标准网页组件库</a></li>
<li><a href="#">w3c-标准网页组件库w3c-标准网页组件库</a></li>
<li><a href="#">w3c-标准网页组件库w3c-标准网页组件库</a></li>
<li><a href="#">w3c-标准网页组件库w3c-标准网页组件库</a></li>
<li><a href="#">w3c-标准网页组件库w3c-标准网页组件库</a></li>
</ul>
<div><a href="#">w3c-标准网页组件库w3c-标准网页组件库</a></div>
分享到：
| 网页上如何执行本地程序
评论
发表评论

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

相关推荐

    div 溢出隐藏 div文字溢出用点(省略号)代替

    然而，仅仅隐藏溢出的内容并不足够，我们还希望在内容被截断的地方显示省略号，以提示用户有隐藏的文本。这就需要用到 `text-overflow` 属性。`text-overflow` 属性告诉浏览器如何处理溢出的不可见内容。设置 `text-...

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

    6. **文本截断**： ```css .cut{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } ``` - **作用**：当内容超出容器宽度时，自动隐藏超出部分并显示省略号。 - **应用场景**：适用于导航栏...

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

    在网页设计中，有时候我们希望文本在单行内显示，如果内容超过指定宽度，就需要自动截断并在结尾处添加省略号。这是一个常见的需求，主要应用于标题、摘要或者列表项的展示。在CSS中，我们可以利用特定的样式来实现...

    移动端内容超出

    6. **文本截断**：通过`text-overflow`和`white-space`属性，可以对过长的文本进行截断并添加省略号。 ```css .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ``` 7. **...

    JavaScript 版本自动生成文章摘要

    它能够有效地解决自动截断文本时遇到的标签闭合问题，并提供了一种快速生成文章摘要的方法。不过，需要强调的是，任何自动化工具都有其局限性，因此在使用自动生成的摘要时，应结合实际情况进行适度的编辑和校对。

    jQuery Mobile开发常用技巧

    默认情况下，jQuery Mobile 会智能截断过长的文本，这对于列表项和脚注来说可能会带来不便。可以使用 CSS 来覆盖这一行为。 示例代码如下： ```css /* For list items */ body .ui-li .ui-li-desc { white-space:...

    jQuery Mobile十大常用技巧

    当jQuery Mobile中的列表项或按钮文本过长时，默认会自动截断。你可以通过添加CSS样式来阻止这种行为。例如，对于按钮，设置`.ui-btn-text { white-space: normal; }`；对于列表项，设置`.ui-li-desc { white-space...

    css overflow溢出隐藏(文字溢出时的自动隐藏处理)

    在这个示例中，`li` 元素的宽度被设定为200像素，由于内容过长，通过设置overflow为hidden和text-overflow为ellipsis，溢出的内容将被隐藏，并在末尾显示省略号。 需要注意的是，text-overflow属性在IE6+浏览器中是...

    自动生成文章摘要的代码[JavaScript 版本]

    (BODY|SCRIPT|P|DIV|H1|H2|H3|H4|H5|H6|ADDRESS|PRE|TABLE|TR|TD|TH|INPUT|SELECT|TEXTAREA|OBJECT|A|UL|OL|LI|BASE|META|LINK|HR|BR|PARAM|IMG|AREA|INPUT|SPAN) [^&gt;]*(&gt;?)/ig; ``` 此正则表达式可以匹配各种...

    浏览器CSS方面兼容手册.txt

    当文本过长导致溢出时，可以使用CSS来处理文本的截断。 **解决方法：** 使用`text-overflow`属性来处理文本溢出： ```css li { width: 200px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden...

    CSS样式表常用小技巧收藏

    - **文字过长**: 当文本过长无法完全显示时，可以使用`text-overflow: ellipsis`使其以省略号形式显示。 ```css .text-container { width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; ...

    基于javascript实现文字无缝滚动效果

    接着，CSS样式被用来设置列表项`&lt;li&gt;`的样式，如高度、行高、文本溢出处理、字体大小以及不允许换行，以确保文字在一行内显示并截断多余的部分。 然后，JavaScript代码开始发挥作用。首先，我们获取到`&lt;div&gt;`元素的...

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