39

リンクで text-overflow プロパティを使用したい。私は段落のために働いていますが、リンクのために働いていません。

ここにHTMLコードがあります

<div>
  <ul>
    <li>
        <p>the text is too long</p>
    </li>   
    <li>
         <a href="javascript:alert('test')">the link is too long</a>
    </li>
  </ul>
</div>

CSSコードは次のとおりです。

a {
  white-space: nowrap;
  width:50px; 
  overflow: hidden;
  text-overflow: ellipsis;

}
p {
  white-space: nowrap;
  width:50px; 
  overflow: hidden;
  text-overflow: ellipsis;
}

http://jsfiddle.net/corinnekm/LLVDB/の例を参照してください。

どうもありがとうございました。

4

2 に答える 2

73

タグは<a>インライン要素です。省略記号はブロック要素にのみ適用できます。試してみるa { display: block; }と機能します

于 2012-10-10T13:12:21.417 に答える
8

http://primercss.io/utilities/には、css トランケート ルール セットがあります。https://jsfiddle.net/illegs/g04L9xd6/を参照してください

.css-truncate.css-truncate-target,
.css-truncate .css-truncate-target {
display: inline-block;
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: top
}

.css-truncate.expandable.css-truncate-target,
.css-truncate.expandable.css-truncate-target,
.css-truncate.expandable:hover .css-truncate-target,
.css-truncate.expandable:hover.css-truncate-target {
max-width: 10000px !important
}

<span class="css-truncate expandable">
<span class="branch-ref css-truncate-target"><a href="javascript:alert('test')">the link is too long</a></span>

于 2016-02-02T01:58:09.743 に答える