Question

我尝试将文字溢出80％的DIV后试图让文字溢出。我想要点在项目名称和价格之间占用空间。但是，当项目名称太长时，它会切断单词。我想要包装或流下来的话。我似乎无法弄清楚如何做到这一点。

以下是问题的一个示例：请参阅第3项以及它是如何被切断的。

＆＃13;

.item {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.descripcion {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.descripcion:after {
  text-overflow: ellipsis;
  content: " ........................................................................................................................................................................................................................................................................................."
}
#name {
  color: red;
}

＆＃13;

<div class="item">
  <h4 class='descripcion'> <span id='name'>Burger</span> </h4>
  <h4 class='precio'> $9.99 </h4>
</div>



<div class="item">
  <h4 class='descripcion'> <span id='name'>Hot Dog</span> </h4>
  <h4 class='precio'> $4.99 </h4>
</div>



<div class="item">
  <h4 class='descripcion'> <span id='name'>Much longer item name that ends up taking too much of the space and going outside of the div</span> </h4>
  <h4 class='precio'> $4.99 </h4>
</div>

＆＃13;

Answer 1

可能的解决方案是使用一个增长的中心flex容器，并允许h4标签默认包装....

这需要对特定用途进行一些额外的改动，但整体而言理论可能有效。

＆＃13;

.item {
  width:100%;
  display: flex;
  justify-content: space-between;
 
  
}
.descripcion {
  overflow: hidden;

}

span.dots { flex-grow: 1; min-width: 10%;height: 35px; margin-left: 5px; margin-right: 5px; border-bottom: 2px dotted #aaa;}

#name{
color: red;
}

＆＃13;

<div class="item">     
<h4 class='descripcion'> <span id='name'>Burger</span> </h4>
<span class="dots"></span> <h4 class='precio'> $9.99 </h4>
 </div>

 

 <div class="item">     
<h4 class='descripcion'> <span id='name'>Hot Dog</span> </h4>
 <span class="dots"></span><h4 class='precio'> $4.99 </h4>
 </div>

 
 
 <div class="item">     
<h4 class='descripcion'> <span id='name'>Much longer item name that ends up taking too much of the space and going outside of the div</span> </h4>
 <span class="dots"></span><h4 class='precio'> $4.99 </h4>
 </div>

＆＃13;

Answer 2

我建议将您的姓名更改为课程，因为不止一个。如果jQuery版本可以接受，那么这是一个小提琴：https://jsfiddle.net/manoeuvres/ggbysn3s/ 在此版本中，.name类的宽度相对于它的父级进行检查，然后.descripcion类被换成新的.wrapped类。：之后

还有一点jquery来重新定位价格，但此版本中缺少点数

占用一定数量的屏幕后溢出文字？

2 个答案: