css 居中页面的剪辑或省略文本困难

Question

所以我有一些 php 输出 text/data 位于我页面的中心。我用 css

将它居中

*{
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;

}

我想让数据成为截断的输出，在一定数量的 space 之后它会切断输出并给出“...”。

text-overflow: ellipsis;

如果我不能让它工作，我可以

text-overflow: clip;

问题是，我无法让它与我现有的 css 一起使用，我相信是因为要使文本溢出正常工作，我必须将宽度设置为特定大小。但是，当我这样做并删除数据上 100% 的宽度时，它不再很好地居中。

*顺便说一下，在数据之前设置两个 css div 的原因是，无论调整大小如何，它都能使我的整个页面居中，这很有帮助。

在这种情况下，有没有想过如何让它发挥作用？有点卡住了。非常感谢。

Answer 1

您可以使用以下 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>

css 居中页面的剪辑或省略文本困难

clip or ellipses text difficulties with css centered page

css

center

truncate