如何限制範圍的文本

我有一個用html/js創建的treeview。顯示文本的元素是一個跨度。如何限制範圍的文本

我想限制範圍的寬度，因爲有時文本很長。例如，我只想顯示前20個字符。如果比這更長，則顯示一個省略號。

所以我已經嘗試設置最大寬度，但這不是一個跨度的尊重。

如果我將span更改爲div，它可以工作，但它完全改變了treeview的佈局。

有沒有辦法實現這個？（我在下面把「LIMIT TEXT HERE」以示跨度是有限的。）

<ul class="tree-view-list"> 
     <li class="node-item"> 
      <i click.delegate="toggleItems(item)" 
       if.bind="item.nodeAspect.isExpanded && item.children.length > 0" 
       class="icon sf-icon-chevron-down p-r-half grow chevron" 
       aria-hidden="true"></i> 
      <i click.delegate="toggleItems(item)" 
       class="icon sf-icon-chevron-right p-r-half grow chevron" 
       if.bind="!item.nodeAspect.isExpanded && item.children.length > 0" 
       aria-hidden="true"></i> 



      <div if.bind="item.nodeAspect.isEditing"> 
       <form> 
        <input blur.trigger="saveEdit(item)" attach-focus="true" type="text" value.bind="item.name"> 
        <button style="display: none" click.delegate="saveEdit(item)"></button> 
       </form> 
      </div> 

      <span class="e-treeview"> 

       <span if.bind="!item.nodeAspect.isEditing" 
         mouseover.delegate="onMouseOver(item)" 
         mouseout.delegate="onMouseOut(item)" 
         class="node-wrapper ${item.nodeAspect.isSelected ? 'node-is-selected e-active' : ''} ${item.nodeAspect.isHovering ? 'e-node-hover' : ''}" 
         click.delegate="nodeSelected(item)" 
         dblclick.delegate="nodeDoubleClick(item)"> 
        <span draggable="true" 
          class="node-text" 
          contextmenu.delegate="showContextMenu($event, item)" 
          dragstart.delegate="dragStart($event, item)" 
          dragover.delegate="dragOver($event, item)" 
          drop.delegate="drop($event,item)"> 
          <i class="tree-view-icon sf-icon-${item.itemType.icon}"></i> ${item.name} LIMIT TEXT HERE 
        </span> 

       </span> 
      </span> 
      <compose if.bind="item.nodeAspect.isExpanded" repeat.for="item of item.children" view="./tree-view.html"></compose> 

     </li> 
    </ul>

來源

2016-12-20 Greg Gum

一般（簡體），你應該把一個width限制（min-width工作太）。

對於要支持的寬度，display應該是block或inline-block。

您應該告訴元素以隱藏overflow（overflow: hidden）。

並告訴它把ellipsis作爲text-overflow。

並且爲了防止文字環繞，您應該使用white-space: nowrap使它保持在一條線上。

內聯塊是你的樹形視圖的一個選項嗎？

像這樣：

.node-text { 
    display: inline-block; 
    width: 10em; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}

來源

2016-12-20 00:42:48 Simon

嘿，'inline-block'是訣竅！謝謝。 –

我想你會需要使用JavaScript爲。

在這裏被使用jQuery檢查長度和更換，如果超過20

if ($("#myspan").html().length > 20) { 
 
    short_text = $("#myspan").html().substr(0, 20); 
 
    $("#myspan").html(short_text + "..."); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<span>This is some text that really should be shorter. I hope it gets reduced</span> 
 
<br> 
 
<span id="myspan">This is some text that really should be shorter. I hope it gets reduced</span>

來源

2016-12-20 00:43:25 Brad

我正在尋找一個CSS答案，而不是JS答案。 –

變化的跨度到我的解決方案[顯示：內聯塊]，並給它一個[MAX-寬度]與[文本溢出：省略號]和[溢出：隱藏;空白：NOWRAP;垂直對齊：中部;]

p { 
 
    font: 16px/28px tahoma; 
 
    color: #333; 
 
} 
 
p span { 
 
    display: inline-block; 
 
    max-width: 100px; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
}

<p> 
 
    Lorem ipsum dolor sit amet, ex vel <span>doming splendide aliquando. Mei petentium scripserit cu.</span> Vim ferri tantas ne. Ad laudem doming inimicus pri, cum minimum adversarium te. Enim dicit id sit, magna dicit omnium et vix. 
 
</p>

來源

2016-12-20 00:47:23

如何限制範圍的文本

回答

相關問題