代码之家 › 专栏 › 技术社区 › Wilson

使用以css为中心的页面剪裁或省略号文本困难

truncate center css

0

Wilson · 技术社区 · 8 年前

*{
margin:0;
padding:0;
}

body{
text-align:center; /*For IE6 Shenanigans*/
font-size: 100%;
font-weight: 1;
font-family: 'rationale';
background:black;

}

#data {
position: absolute;
width: 100%; /*makes the element 100%, to center it. */
top: 180px;
right: 0px;
line-height: 40px;

}

我想让数据成为一个截断的输出,在经过一定的空间后,它会切断输出,并给出一个“…”。

text-overflow: ellipsis;

如果我不能做到这一点,我可以用一个

text-overflow: clip;

*顺便说一句,在数据之前使用两个css div的原因是,它使我的整个页面居中,而不管大小如何,这很有帮助。

非常感谢。

1 回复 | 直到 8 年前

1

LKG 8 年前

您可以使用以下css方法获得

.box {
  text-align: center;
  border: 1px solid red;
  width: 500px;
  margin: 0 auto;
}

.content {
  width: 50%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 auto;
}

<div class="box">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda adipisci vel, dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat tempora voluptate totam exercitationem neque quae.
  </div>
</div>