请更详细地描述您的问题！

Question

使用tranform将文本居中放置在元素中。

句子可以是一行
句子可以是多行
如果句子超出2行，则应隐藏溢出。

在多行的case2中（隐藏溢出使第一行句子隐藏，如何使其与变换一起工作） -

试过：

变换值更改

：单行可用时出错。用于居中的表格和表格单元格：不能在多行中工作。

必需：纯css解决方案（无jquery / javascript）

＆＃13;

dbContext.Foos
    .GroupJoin( 
        dbContext.Bars, 
        f => f.OtherId, 
        b => b.OtherId,
        ( foo, bars ) => new { foo, bars } )

＆＃13;

.parent {
  height: 40px;
  width: 200px;
  background-color: red;
  overflow: hidden;
  margin-top: 20px;
  position: relative;
}

.child {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

＆＃13;

Answer 1

在父级上使用line-height（其值应与div高度匹配），然后重置子元素。

另外，将孩子设置为inline-block并将其vertical-align: middle

父级上的

overflow: hidden将删除任何不需要的文本，这些文本延伸到前面2行或上面定义的40px之下。

.parent {
  height: 40px;
  width: 200px;
  background-color: red;
  overflow: hidden; 
  margin-top: 20px;
  line-height: 40px; /* should match your parent div height */
}

.child {
  padding: 2px;
  display: inline-block;
  vertical-align: middle;
  line-height: normal; /* reset it here */
}

<div class="parent">
  <div class="child">
    Helllllllloo I am here to see if I can fit this issues. I can fit this issues.
  </div>
</div>

<div class="parent">
  <div class="child">
    Helllllllloo I am here to see.
  </div>
</div>

Answer 2

我会使用text-overflow: ellipsis;

DEMO：https://jsfiddle.net/4ncdh507/

.parent {
  width: 200px;
  height: 40px;
  text-align: center;
  display: table;
  background-color: red;
}

.inner-div {
  display: table-cell;
  vertical-align: middle;
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  max-height: 40px;
  display: inline-block;
}

Answer 3

max-height到子div并添加line-height以隐藏部分内容。

.parent {
  height: 40px;
  width: 200px;
  background-color: red;
 overflow-y: hidden;  
  margin-top: 20px;
  position: relative;

}

.child {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  max-height: 40px;
  line-height: 1.20;  /* hide cut off part of content all though you can adjust font size*/  
}

  <div class="parent">
          <div class="child">
            Helllllllloo I am here to see if
           I am here to see
           I am here to see I am here to see
            I am here to see I am here to see
          </div>
        </div>
        
        <div class="parent">
          <div class="child">
            Helllllllloo I am here to see.
          </div>
        </div>

Answer 4

请更详细地描述您的问题！

如果没有恰当的描述，我们的解决方案几乎没有帮助。

话虽如此，我建议添加（根据我的解释），

text-alignment: center;

给你的CSS。这允许文本居中（我认为你有问题）。

垂直高度固定的居中句子

4 个答案:

请更详细地描述您的问题！