css实现禁止换行并超出隐藏的方法

小编给大家分享一下css实现禁止换行并超出隐藏的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联公司专注于潮安网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供潮安营销型网站建设,潮安网站制作、潮安网页设计、潮安网站官网定制、成都微信小程序服务,打造潮安网络公司原创品牌,更为您提供潮安网站排名全网营销落地服务。

css实现禁止换行并超出隐藏的方法:首先创建一个HTML示例文件;然后在body中创建一些文字内容;最后通过“white-space”以及“text-overflow”属性来实现内容禁止换行并超出隐藏即可。

在CSS中可以使用white-space属性配合overflow属性来实现文字不换行,且超出部分隐藏。

white-space属性指定元素内的空白怎样处理,设置值为nowrap时,文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。

overflow属性规定当内容溢出元素框时发生的事情,当值设置为hidden时,则内容会被修剪,并且其余内容是不可见的。






p {
width: 400px;
height: 100px;
border: 1px solid red;
}
.overflow{
white-space: nowrap;
overflow: hidden;
}



普通文本!!! 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。  这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。

这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。  这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。

效果图:

css实现禁止换行并超出隐藏的方法

还可以在加上text-overflow属性,实现超出部分隐藏,且显示为省略号。

text-overflow属性规定当文本溢出包含元素时发生的事情,有以下属性值:

clip 修剪文本。

ellipsis 显示省略符号来代表被修剪的文本。

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

示例:






p {
width: 400px;
height: 100px;
border: 1px solid red;
}
.text-overflow{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}



普通文本!!! 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。  这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。

这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。  这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。

效果图:

css实现禁止换行并超出隐藏的方法

以上是“css实现禁止换行并超出隐藏的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享文章:css实现禁止换行并超出隐藏的方法
URL链接:http://scyanting.com/article/pejohd.html