Question

我在wordpress的<H4>标记内的<header>文字中有一个标题。我希望如果标题太长（不适合<header>宽度），文本将被截断并在其位置添加“...”。

例如标题（取自ipsum生成器）：

Audiam tritani提示mel ex

应该是这样的：

Audiam tritani提示......

尝试使用溢出属性但没有成功..

Answer 1

使用text-overflow: ellipsis

h4 {
    width: /** your width **/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

使用这些内容会根据您的宽度剪切长文本，并在其上添加...。

这是来自W3Schools的实时代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    #div1 {
      white-space: nowrap;
      width: 12em;
      overflow: hidden;
      text-overflow: clip;
      border: 1px solid #000000;
    }
    #div2 {
      white-space: nowrap;
      width: 12em;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #000000;
    }
  </style>
</head>

<body>

  <p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>

  <p>This div uses "text-overflow:clip":</p>
  <div id="div1">This is some long text that will not fit in the box</div>

  <p>This div uses "text-overflow:ellipsis":</p>
  <div id="div2">This is some long text that will not fit in the box</div>

</body>

</html>

＆＃13;

在W3Schools: text-overflow中查看更多信息。

Answer 2

我前一段时间遇到过这个问题。您可以简单地将text-overflow: ellipsis;添加到h4代码的样式中。

你看过W3学校的解决方案了吗？请查看此link。

您的最终代码应如下所示：

＆＃13;

#div1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: clip; 
    border: 1px solid #000000;
}

#div2 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

＆＃13;

<!DOCTYPE html>
<!-- THIS Code was taken from W3 Schools-->
<html>
<head>


</head>
<body>

<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>

<p>This div uses "text-overflow:clip":</p>
<div id="div1">This is some long text that will not fit in the box</div>

<p>This div uses "text-overflow:ellipsis":</p>
<div id="div2">This is some long text that will not fit in the box</div>
  <h1>Code from W3 Schools!</h1>

</body>
</html>

＆＃13;

如果太长时间如何中断H4文本

2 个答案: