html - 让中央 div 定义其他的宽度

Question

我正在研究一种 LED 横幅模拟，文本从右到左排成一行。

我总是显示 3 个词:上一个词、当前词、下一个词。它们通过 js 计时器进行更新，以便当前成为最后一个，下一个成为当前等等...

用户应始终关注中心词，因此我希望它在容器中居中。

|last_current_next|

外容器的宽度是固定的，所以外面的字很长的时候可能会被剪掉，这样就可以了。应该这样剪掉:

la |st_current_ne| xt但我只得到这个工作:|la_curr_next|

我一直在使用 float ，但它们给我的结果是外部单词粘在框的边界上，例如:

|last<_____current______>next|

我需要他们坚持中心词，例如:

|____>last_current_next<_____|

那是我的 CSS。有什么想法吗？

#outputfield{
width: 500px;
height: 100px;
overflow: hidden;
text-align: center;
white-space:nowrap;

}

#pastContainer, #futureContainer, #presentContainer{
font-size: 4.5em;
font-style: normal;
font-weight: normal;
white-space:nowrap;
overflow:hidden;
}

#pastContainer, #futureContainer{
background: red;
 }

 #pastContainer {
width: auto;
text-align: right;
overflow: hidden;
color:#CECECE;  
 }

 #presentContainer{
width: auto;
display:inline;
zoom: 1;
display: table;
text-align:center;
overflow:hidden;
background:yellow;
text-shadow: -1px -1px 0px #FFF;

 }

#futureContainer {
width: auto;
text-align: left;
overflow: hidden;
color: #CECECE;
}`

Answer 1

根据我的评论，我猜到了您拥有的 html，并创建了一个非常基本的“led-banner”。实际上， future 和过去的容器不需要 text-align。并且您应该删除 display:table (如果可能的话，不看您的 js 就很难知道)。然后，只需为您的 3 个元素添加一个 display:inline-block; 就可以了。查看 jsfiddle .

#outputfield{
width: 500px;
height: 100px;
overflow: hidden;
text-align: center;
white-space:nowrap;
background-color:gray;
}

#pastContainer, #futureContainer, #presentContainer{
font-size: 1.5em;
font-style: normal;
font-weight: normal;
white-space:nowrap;
width: auto;
display:inline-block; <-- add this line
overflow: hidden;
}

#pastContainer, #futureContainer{
background: red;
 }

 #pastContainer {
color:#CECECE;  
 }

 #presentContainer{
display:inline;
text-align:center;
background:yellow;
text-shadow: -1px -1px 0px #FFF;
zoom: 1;
 }

#futureContainer {
color: #CECECE;
}`

---

编辑:使用javascript

绝对位置是这里的诀窍。所以删除我之前提示的inline-block，添加一个position:relative到parent，并更新你的javascript

var i = 1;
var wordsArray = ("xxx Here comes a very long text with short an ververyveryverylong words xxx").split(" ");

changeWords();
window.setInterval(changeWords,1000);

function changeWords(){
    $('#pastContainer').html(wordsArray[i-1]);
    $('#presentContainer').html(wordsArray[i]);
    $('#futureContainer').html(wordsArray[i+1]);      
    i++;
    if(i >= wordsArray.length){i=1;}

    var centerPoint = $('#outputfield').width()/2;
    var myPastWidth = $('#pastContainer').width();
    var myPresentWidth2 = $('#presentContainer').width()/2;
    var elementDephase = myPastWidth + myPresentWidth2 - centerPoint;
    $('#pastContainer').css({left: - elementDephase});
    $('#presentContainer').css({left: (- myPresentWidth2 + centerPoint)});
    $('#futureContainer').css({left: (+ myPresentWidth2 + centerPoint)});  
}

所以首先我更新了你的 javascript 以获得更好的调用(使用 setInterval 而不是从函数内部调用函数)。

那么这个想法就是简单地检查中间单词的大小，将其居中并将左侧的其他两个单词分别推到右侧。如果您想在单词之间添加一个小间距，只需使用我在 left 参数上设置的距离即可。查看working fiddle .