css里a标签所有属性都是超过一定宽度后隐藏并且变成省略号 。

html-css023

css里a标签所有属性都是超过一定宽度后隐藏并且变成省略号 。,第1张

1、新建一个html页面。

2、在html代码页面找到<body>标签，在<body>标签里创建一个<p>标签，然后输入显示的内容并添加一个class类为 class="cont"。

3、找到<title>标签，在这个标签下面创建一个<style>标签，在<style>标签里设置class为cont的样式内容超出后为隐藏<style>.cont{overflow: hidden/*内容超出后隐藏*/}</style>。

4、为cont类添加内容显示为一行：white-space: nowrap，内容超出后显示为省略号：text-overflow: ellipsis。

5、保存好代码后使用浏览器查看效果。

display:block/*内联对象需加*/

width:31em

word-break:keep-all/* 不换行 */

white-space:nowrap/* 不换行 */

overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden一起使用。*/

一般的文字截断（适用于内联与块）：

.text-overflow {

display:block/*内联对象需加*/

width:31em

word-break:keep-all/* 不换行 */

white-space:nowrap/* 不换行 */

overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden一起使用。*/

}

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：li{width: 100pxwhite-space: nowrapoverflow: hidden}。

3、浏览器运行index.html页面，此时<li>标签中超出的文字被隐藏了。