Question

如何垂直对齐单行或多行？

我需要省略号，因为在某些情况下我只想显示一行，有时只显示两行。

到目前为止，这是我的代码：

html, body, p {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.ellipsis {
    height: 100px;
    border: 5px solid #AAA;
}

.blah {
    overflow: hidden;
    height: 1.2em;
   line-height: 1.2em;
   display: block;

}
.blah:before {
    content:"";
    float: left;
    width: 5px;
    height: 3.6em;
}
.blah > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px;
}

直播示例：http://jsfiddle.net/0dqef9da/274/

Answer 1

您应该在文本css样式属性

中使用

{
  "coordinates": [
    {
      "area": [
        {
        },
        {
        }
      ]
    },
    {
      "area": [
        {
        },
        {
        },
        {
      ]
    }
  ]
}

Answer 2

您只使用text-align: center;的垂直对齐中心，如果您想使用省略号

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style> 
#div1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: clip; 
    border: 1px solid #000000;
}

#div2 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

</style>
</head>
<body>

<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>

<p>This div uses "text-overflow:clip":</p>
<div id="div1">This is some long text that will not fit in the box</div>

<p>This div uses "text-overflow:ellipsis":</p>
<div id="div2">This is some long text that will not fit in the box</div>

</body>
</html>

＆＃13;

请点击链接： https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

在省略号中你还需要div宽度..请检查上面的代码

如何垂直对齐单行或多行

2 个答案: