Question

这里我使用bootstrap面板来放置数据。这里我在bootstrap面板标题中有一些文本。我想为面板标题内的文本设置限制。

代表。有文字Beautiful dam of world located in arizona。我想设置31字的限制

让我变成

Beautiful dams of world located...

现在已经

了

<div class="panel-heading">One Seater Motorized Recliner Sofa in Pure Leather White Colour</div>

我该怎么做？

Answer 1

一个快速片段，您可以通过特定值限制span / div等中的字符数。此功能还包括一个稍微整洁的......在截止点：

<强> JavaScript的：

<script type="text/javascript">// <![CDATA[
$(function(){
  $(".your-div").each(function(i){
    len=$(this).text().length;
    if(len>80)
    {
      $(this).text($(this).text().substr(0,80)+'...');
    }
  });
});
// ]]></script>

实际上这也可以通过'省略号'CSS功能非常巧妙地完成，但请注意，这是相对较新的，仅适用于单行： -

<强> CSS：

.your-div {
white-space: nowrap;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
}

它的'文本溢出：省略号;'完成所有工作，但你确实需要其他行才能有效地工作。

参考：Limit Number Of Characters

Answer 2

您无法在css中定义多个char。但您可以定义宽度并添加属性：

overflow:hidden;

Answer 3

你可以使用text-overflow：省略号;仅适用于1行文字。

Answer 4

无需使用js，您可以在CSS中完成此操作

.panel-heading{
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

如何设置bootstrap

4 个答案: