使用wordpress建网站的过程中，当首页中或者侧边栏有新闻中心板块，而个别新闻的标题太长的时候，这些标题会分两行显示，严重影响外观美化。我们想控制文字只显示一行，超出部分显示省略号。下面我们就来介绍一下实现的方法，实现的原理是把文本限制在一行（white-space: nowrap;），将溢出的部分要隐藏起来（overflow: hidden；），然后出现省略号（ text-overflow: ellipsis）。

打开主题所在目录，找到标题所对应的选择器名称（例如.news-title），添加如下样式：

Crayon-5c891d2a51dae258666280" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">

Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">

Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">

Crayon-button Crayon-nums-button" title="Toggle Line Numbers">

Crayon-button-icon">

Crayon-button Crayon-plain-button" title="Toggle Plain Code">

Crayon-button-icon">

Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">

Crayon-button-icon">

Crayon-button Crayon-expand-button" title="Expand Code">

Crayon-button-icon">

Crayon-button Crayon-copy-button" title="Copy">

Crayon-button-icon">

Crayon-button Crayon-popup-button" title="Open Code In New Window">

Crayon-button-icon">

Crayon-language">CSS

Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">

Crayon-plain-wrap">

Crayon-main" style="">Crayon-table">Crayon-row">

Crayon-nums " data-settings="show">

Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">

Crayon-num" data-line="Crayon-5c891d2a51dae258666280-1">1

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d2a51dae258666280-2">2

Crayon-num" data-line="Crayon-5c891d2a51dae258666280-3">3

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d2a51dae258666280-4">4

Crayon-num" data-line="Crayon-5c891d2a51dae258666280-5">5

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d2a51dae258666280-6">6

Crayon-num" data-line="Crayon-5c891d2a51dae258666280-7">7

Crayon-code">

Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">

Crayon-line" id="Crayon-5c891d2a51dae258666280-1">Crayon-k ">.news-titleCrayon-sy">{

Crayon-line Crayon-striped-line" id="Crayon-5c891d2a51dae258666280-2">Crayon-h"> Crayon-e ">colorCrayon-sy">:Crayon-h"> Crayon-i ">#333333Crayon-sy">;

Crayon-line" id="Crayon-5c891d2a51dae258666280-3">Crayon-h"> Crayon-e ">font-sizeCrayon-sy">:Crayon-h"> Crayon-i ">14pxCrayon-sy">;

Crayon-line Crayon-striped-line" id="Crayon-5c891d2a51dae258666280-4">Crayon-h"> Crayon-e ">overflowCrayon-sy">:Crayon-h"> Crayon-i ">hiddenCrayon-sy">;

Crayon-line" id="Crayon-5c891d2a51dae258666280-5">Crayon-h"> Crayon-e ">white-spaceCrayon-sy">:Crayon-h"> Crayon-i ">nowrapCrayon-sy">;

Crayon-line Crayon-striped-line" id="Crayon-5c891d2a51dae258666280-6">Crayon-h"> Crayon-e ">text-overflowCrayon-sy">:Crayon-h"> Crayon-i ">ellipsisCrayon-sy">;

Crayon-line" id="Crayon-5c891d2a51dae258666280-7">Crayon-sy">}

下面我们来解释一下上面代码的含义：
overflow:hidden;

overflow属性规定当内容溢出元素框时发生的事情。overflow属性可能的值有以下5中，这里取”hidden”值，表示当内容溢出元素框时执行隐藏操作。

内容不会被修剪，会呈现在元素框之外。内容会被修剪，并且其余内容是不可见的。内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。内容被修剪，则浏览器会显示滚动条以便查看其余的内容。属性的值。white-space:nowrap;

white-space 属性声明建立布局过程中如何处理元素中空白符。（这里的空白符指我们用键盘敲入的空格或回车）whit-space 属性可能的取值有以下6种，这里取值“nowrap”，即文本不换行，在一行内显示。

标签。标签为止。属性的值。text-overflow:ellipsis;

text-overflow 属性规定当文本溢出包含元素时，是否显示省略标记。text-overflow属性可能的取值如下3种类，这里需要对文本溢出元素使用省略标记，选择“ellipsis”。

显示省略符号来代表被修剪的文本。string 原文链接：https://www.f2er.com/wordpress/238476.html

文字只显示一行超出隐藏