Question

我想将text-overflow:ellipsis提供给我的span标记。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="input-group date event_box" style="width: 100%;">

                                    <span class="form-control event_rearrange" style="overflow: hidden; text-overflow: ellipsis; word-wrap: normal;"> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</span>

                                    <span class="input-group-addon" style="background:#000000;" >

<span class="glyphicon glyphicon-pencil " style="color: #FFFFFF;"></span>

</span>
  
  </div>

我得到的输出是result that i get

我不想增加width。

任何帮助都会很棒。

谢谢。

Answer 1

在Css中添加一些自定义width和使用display: inline-flex;

代码段示例

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="input-group date event_box" style="width: 100%;display: inline-flex;">

                                    <span class="form-control event_rearrange" style=" overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;"> Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text  Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text  Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text  Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</span>

                                    <span class="input-group-addon" style="background:#000000;min-width: 42px;" >

<span class="glyphicon glyphicon-pencil " style="color: #FFFFFF;"></span>

</span>
  
  </div>

＆＃13;

Answer 2

.ellipsis { text-: ellipsis; }

<p class=" ellipsis">This is an example text showing nothing interesting but the truncated content via text- shorthand property.</p>

您可以查看以下链接： - https://css-tricks.com/almanac/properties/t/text-overflow/

text-overflow:ellipsis;仅在满足以下条件时才有效：

元素的宽度必须以px（像素）为单位。宽度％（百分比）不起作用。
元素必须有溢出：隐藏和空白：nowrap设置。

＆安培;试试这个链接： - CSS text-overflow: ellipsis; not working?

span tag text-overflow：不使用宽度的省略号

2 个答案: