我如何显示点(“…”)在一个跨度与隐藏溢出?

我的CSS:

#content_right_head span
{
  display:inline-block;
  width:180px;
  overflow:hidden !important;
}

现在它显示内容内容

但是我想展示内容内容…

我需要在内容后面显示点。内容动态地来自数据库。

当前回答

首先，你做一个div标签设置宽度，在里面做p标签，然后添加文本，并应用下面给出的代码。当你的p标签达到div标签的宽度时，“…”将被应用。

列表项

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

2021-07-14 17:16:04

其他回答

非常感谢@sandeep的回答。

我的问题是，我想显示/隐藏文本的跨度与鼠标点击。因此，默认情况下，短文本与点显示，并通过点击长文本出现。再次单击会隐藏长文本并再次显示短文本。

非常简单的事情:只需添加/删除类text-overflow:ellipsis。

HTML:

<span class="spanShortText cursorPointer"  onclick="fInventoryShippingReceiving.ShowHideTextOnSpan(this);">Some really long description here</span>

CSS(和@sandeep加。cursorpointer一样)

.spanShortText {
  display: inline-block;
  width: 100px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

.cursorPointer {
  cursor: pointer;
}

JQuery部分-基本上只是删除/添加类cSpanShortText。

  function ShowHideTextOnSpan(element) {
    var cSpanShortText = 'spanShortText';
    var $el = $(element);
    if ($el.hasClass(cSpanShortText)) {
      $el.removeClass(cSpanShortText)
    } else {
      $el.addClass(cSpanShortText);
    }
  }

2018-08-30 08:38:22

你可以试试这个:

.classname { 宽度:250 px; 溢出:隐藏; 文本溢出:省略; ｝

2014-10-29 06:41:15

首先，你做一个div标签设置宽度，在里面做p标签，然后添加文本，并应用下面给出的代码。当你的p标签达到div标签的宽度时，“…”将被应用。

列表项

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

2021-07-14 17:16:04

我认为你正在寻找文本溢出:省略与空白:nowrap结合

点击这里查看更多细节

2012-07-11 05:51:07

为此，您可以使用text-overflow: ellipsis;财产。像这样写

跨度{ 显示:inline-block; 宽度:180 px; 空白:nowrap;} 溢出:隐藏!重要; 文本溢出:省略; } Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿了一大堆铅字，把它们胡乱拼凑成一本铅字样本书</span>

JSFiddle

2012-07-11 05:51:06

我如何显示点(“…”)在一个跨度与隐藏溢出?

推荐文章

最新文章

标签