Question

以下是一段示例代码： problem code example 我有一个代码，必须满足以下条件： 1）img和文本在同一行 2）带省略号的文本（因此文本长度不会导致它移动到下一行） 3）img和以父母为中心的文本

第一个条件很简单：img{float:left;}

与第二个相同：

longName{ 
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display:block;}

但第三个对我来说真的很痛苦。如果我保留它，因为只有文本将居中，而img保持在左侧（长名称不可见） - 示例中的第三个元素。我尝试的任何改变：
将文本移动到下一行要么破坏省略号效果要么离开父母边界。

请帮忙。

Answer 1

您可以使用flex模型轻松对其进行排序。

.img-circle {
  display:flex;
  justify-content:center;
 }

fork of your pen

Answer 2

li{
  width:15%;
  text-align:center;
  border: 1px solid black;
}

#img1{
   /*float:left;*/vertical-align: inherit;
} 

#longName{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display:inline-block; max-width:175px;
}

#parent4{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<强> demo

img和文本（带省略号）在同一行 - CENTERED

2 个答案: