Есть ли центральный div, определяющий ширину остальных

Question

Я работаю над своего рода LED-Banner-Simulation с текстом, работающим справа налево в одной строке.

Я всегда показываю 3 слова: последнее, текущее, следующее слово. Они обновляются с помощью таймера js, так что ток становится последним, следующий - текущим и т. Д.

Пользователь должен всегда фокусироваться на центральном слове, поэтому я хочу, чтобы он был центрирован внутри контейнера.

|last_current_next|

его неподвижная widht для внешнего контейнера таким образом, внешние слова могут быть обрезаны, когда они очень долго, что ok.They следует отрезать так:

la |st_current_ne| xt , но я только получить эту работу: |la_curr_next|

я работал с поплавками, но они дают мне результат, когда внешние слова прилипать к границе окна, как:

|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, и создал очень простой «ведомый баннер». На самом деле вам не нужен text-align для будущего и прошлого контейнера. И вы должны удалить display:table (если это возможно, трудно узнать, не видя ваших js). Затем просто добавьте display:inline-block; для ваших 3 элементов, и вы должны быть в порядке. см. 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; 
}` 

---

EDIT: С помощью JavaScript

абсолютное положение трюк здесь. Так удалить inline-block я намекал перед рукой, добавить position:relative к родителю, и обновить 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.