2022年02月18日整理发布:css怎么实现禁止换行并超出隐藏

巩群艺
导读 我们来谈谈css如何停止包装,超越隐藏。相信朋友们也应该密切关注这个话题。现在,我们来谈谈css如何停止包装并超越隐藏。边肖还收集了关于

我们来谈谈css如何停止包装,超越隐藏。相信朋友们也应该密切关注这个话题。现在,我们来谈谈css如何停止包装并超越隐藏。边肖还收集了关于css如何停止包装并超越隐藏的相关信息。我希望你看到后会喜欢。

Css实现了禁止换行符和超越隐藏的方法:首先创建一个HTML样本文件;然后在正文中创建一些文本内容;最后,通过“空白”和“文本溢出”属性禁止内容换行和超出隐藏。

本文的运行环境:Windows7系统,HTML5CSS3版本3,DELL G3电脑

在CSS中,可以使用带有溢出属性的空白属性来实现文本不换行,多余部分隐藏。

空白属性指定如何处理元素中的空白。当值为nowrap时,文本不会换行,而是继续在同一行上,直到遇到br标记。

Overflow属性指定当内容溢出元素框时会发生什么。当该值设置为hidden时,内容将被修剪,其余内容将不可见。

!声明文档类型

超文本标记语言

meta charset='UTF-8 '

样式类型='text/css '

p {

宽度: 400 px;

高度: 100像素;

border: 1px纯红;

}。溢出{

white-space : nowrap;

飞越:隐藏;

}

/style

/head

身体

p普通文字!

这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。

这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。

/p

p class='溢出'

这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。

这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。

/p

/body

/html渲染:

还可以添加text-overflow属性来隐藏多余的部分,并将其显示为省略号。

text-overflow属性指定当文本溢出元素时会发生什么,它具有以下属性值:

剪辑修剪文本。

省略号显示省略号来表示修剪的文本。

字符串使用给定的字符串来表示被修剪的文本。

示例:

!声明文档类型

超文本标记语言

meta charset='UTF-8 '

样式类型='text/css '

p {

宽度: 400 px;

高度: 100像素;

border: 1px纯红;

}。文本溢出{

white-space : nowrap;

文本-overflow:省略号;

飞越:隐藏;

}

/style

/head

身体

p普通文字!

这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。

这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。

/p

'文本溢出'

这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。

这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。这里有一些文本。

/p

/body

/html渲染:

【推荐学习:css视频教程】以上就是css如何防止断行,超越隐藏的细节。请多关注php中文网站的其他相关文章!

来源:php中文网站

标签:

免责声明:本文由用户上传,如有侵权请联系删除!