Question

这是 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，则指向的三角形将消失而不是文本。

有人可以帮我解决这个问题吗。

Answer 1

如果您将内容包装在一个额外的元素中，则以下内容可能有效：

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

我调整了边框颜色，因为箭头形状不明显，但你可以很容易地修复它。

我将文字包裹在span中，设置white-space: nowrap以使文字形成一行，然后设置overflow: hidden以隐藏任何宽于宽度的文字。设置display: block或使用div代替span。

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

Answer 2

您可以在不向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;
}

Demo

Answer 3

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

<强> 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/

Answer 4

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

但我建议你看看text-overflow

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

选中此JSFiddle

文本溢出箭头形div

4 个答案: