在flex容器中设置文本的省略号

问题描述

有没有什么办法让下面的HTML行为如此：

1. 文本垂直居中对齐
$

2. 
   
   
   

   我可以得到1或2，但不是两个。 请注意，HTML不能被修改，它是由第三方库生成的。我们只有改变CSS的能力。
   
   

   .target {width：300px; height：50px;边框：实心1px红色;溢出：隐藏;白色空间：nowrap;文本溢出：省略号;显示：flex; / *更改以阻止省略号* / align-items：center; } < label class =target>这里的文本是非常长的，如果这个框被调整得太小，可能会被截断< / label>

   解决方案

   省略号需要在文本元素上设置，

   .target {display：flex; align-items：center;宽度：300px; height：50px;边框：实心1px红色; white-space：nowrap;} span {overflow：hidden; text-overflow：ellipsis;} < label class = 目标 > < span>这里的文本非常长，如果这个框被调整得太小，可能会被截断< / span>< / label>

   / div>

   
   
   

   更多选项：将省略号应用于多行文本

   
   

   Is there any way to get the following HTML behave so that:

   1. The text is center-aligned vertically
   2. The text is a single line, and truncates with ... (ellipsis)

   I can get either 1 or 2, but not both.

   Please note, HTML cannot be modified, it's generated by a third-party library. We only have ability to change css.

   .target {
   
     width: 300px;
     height: 50px;
     border: solid 1px red;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     display: flex; /*change to block for ellipsis*/
     align-items: center;
   
   }

   <label class="target">
     Text here is very very long that it might get truncate if this box get resized too small
   </label>

   解决方案

   The ellipsis need to be set on the text element, not on the container:

   .target {
     display: flex;
     align-items: center;
     width: 300px;
     height: 50px;
     border: solid 1px red;
     white-space: nowrap;
   }
   
   span {
     overflow: hidden;
     text-overflow: ellipsis;
   }

   <label class="target">
     <span>Text here is very very long that it might get truncate if this box get resized too small</span>
   </label>

   More options: Applying an ellipsis to multiline text

   这篇关于在flex容器中设置文本的省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！