1

これはHTMLです:

<div class="arrow"> 
i need to hide the overflown text which comes out of the div 
</div>

対応するCSSは次のとおりです。

.arrow {
  width: 5%;
  position: relative;   
}

.arrow:before {
   content: " ";
   width: 0;
   position: absolute;
   left: -0.58em;
   border-style: solid;
   border-width: .585em .585em .585em 0;
 }

オーバーフローしたテキストを非表示にする必要があります。

適用overflow:hiddenすると、テキストの代わりに尖った三角形が消えます。

誰かがこれで私を助けてくれませんか。

4

4 に答える 4

2

コンテンツを余分な要素でラップすると、次のように動作する可能性があります。

<div class="arrow">
    <span>i need to hide the overflown 
          text which comes out of the div</span>
</div>

CSS の場合:

.arrow {
    width: 5%;
    position: relative;
}
.arrow:before {
    content:"";
    width: 0;
    position: absolute;
    left: -0.58em;
    border-style: solid;
    border-width: .585em .585em .585em 0;
    border-color: red yellow green blue;
}
.arrow span {
    width: auto;
    display: block;
    white-space: nowrap;
    overflow: hidden;
}

矢印の形がわかりにくかったのでボーダーの色を微調整しましたが、簡単に修正できます。

テキストを でラップし、テキストが1 行になるように設定spanしてから、幅より広いテキストを非表示にするように設定しました。の代わりに a を設定するか、使用します。white-space: nowrapoverflow: hiddendisplay: blockdivspan

フィドルのデモ: http://jsfiddle.net/audetwebdesign/nukeL/

于 2013-08-19T16:34:03.943 に答える