CSS（位置：绝对+左：50％=最大宽度：50％）？

Question

我工作的地方我有一个暂时性的问题，在网站上，我有一个div与CSS这样的：

.box{
    position: absolute;
    width: auto;
    max-width: 75%;
    left: 50%;
    transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    background: #000;
    color: #fff;
}

您可以在此处看到一个简单的JSFiddle，其中box1工作正常，文本很短，并且width: auto;工作正常......

但是第二个框box2有很长的文本并且max-width: 75%;，但是它不能正常工作，您可以注意到它的宽度看起来像50%

我的问题是从哪里box2得到50%宽度？我该如何解决这个问题？

提前致谢

Answer 1

您可以使用额外的标签（span例如 a）来实现所需的布局

\n\n

演示版

\n\n

HTML：

\n\n

<div class="box box1"><span>box1 Lara had been back and</span></div>\n<div class="box box2">\n    <span>box2 Lara had been back and forth along the river path many times in her short life. Her people had not created the path, it had always been there, like the river, but their deerskin-shod feet and the wooden wheels of their handcarts kept the path well worn. Lara\xe2\x80\x99s people were salt traders, and their livelihood took them on a continual journey</span>\n</div>\n

\n\n

CSS：

\n\n

.box{\n    position: absolute;\n    width: 100%;\n    text-align:center;\n}\n\n.box1{\n    top: 20px;\n}\n\n.box2{\n    top: 100px;\n}\n.box span{\n    display:inline-block;\n    max-width:75%;\n    background: #000;\n    color: #fff;\n    text-align:left;\n}\n

\n