css不换行代码省略号

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,我们可以通过一些属性来控制文本的换行和省略号显示。下面就来介绍一下这些属性具体是什么以及怎样使用。CSS控制文本不换行的方法是通过white-space属性来设置,其属性值有以下三种: w

在CSS中,我们可以通过一些属性来控制文本的换行和省略号显示。下面就来介绍一下这些属性具体是什么以及怎样使用。

CSS控制文本不换行的方法是通过white-space属性来设置,其属性值有以下三种:

 white-space: normal; // 默认值,自动换行
    white-space: nowrap; // 不换行
    white-space: pre; // 不换行,保留空格和换行符 

当我们将white-space设置为nowrap的时候,如果文本内容过长,那么超出宽度的部分就不会自动换行,而是会被缩略显示。这时候需要使用text-overflow属性来控制省略号的显示方式。

text-overflow属性有以下几种属性值:

 text-overflow: clip; // 直接被隐藏
    text-overflow: ellipsis; // 省略号代替被隐藏部分
    text-overflow: string; // 截断文本并用指定的字符串替换被隐藏部分 

比如,我们可以通过以下代码让文本不换行并且超出宽度的部分用省略号代替:

 p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    } 

同时,我们也可以通过white-space属性来控制文本保留空格和换行符。比如说,我们希望以下代码保持原有的空格和换行:

 pre {
      white-space: pre;
    } 

以上就是CSS中控制文本不换行和省略号显示的方法。根据不同的情况使用不同的属性值,可以有效地控制文本的显示效果。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css不换行代码省略号

粉丝

0

关注

0

收藏

0

已有0次打赏