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;
}

我调整了边框颜色，因为箭头形状不明显，但你可以很容易地解决这个问题。

我将文本包裹在 a 中span，设置white-space: nowrap为使文本形成单行，然后设置overflow: hidden为隐藏任何比宽度更宽的文本。设置display: block或使用 adiv而不是 a span。

小提琴演示：http: //jsfiddle.net/audetwebdesign/nukeL/

于 2013-08-19T16:34:03.943 回答
1

您可以在不向 html 中添加更多元素的情况下执行此操作：

  • 添加white-space: nowrap以防止文本换行
  • 添加padding-left: 1em为箭头腾出空间
  • left: 0为您的箭头设置

并修复了箭头显示...

CSS

.arrow {
    white-space: nowrap;
    width: 10%;
    position: relative;
    overflow: hidden;
    padding-left: 1em;
}
.arrow:before {
    content:" ";
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    border-right: 0;
    border-bottom: .585em solid transparent;
    border-top: .585em solid transparent;
    border-left: .585em solid black;
}

演示

于 2013-08-19T16:43:23.863 回答
0

在箭头内添加一个容器以约束您的文本（假设高度固定）。

HTML

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

CSS

.container {
  height: 30px; /** assuming fixed height here. **/
  max-height: 30px;
  overflow: hidden;
}

JSFiddle 示例：http: //jsfiddle.net/xBM88/

于 2013-08-19T16:25:57.650 回答
0

我在你的小提琴中没有找到任何尖三角形。

但我建议你看看text-overflow

overflow:hidden;
text-overflow:ellipsis;  //don't hide content, instead render an ellipsis ("...")

检查这个JSFiddle

于 2013-08-19T16:27:06.107 回答