抱歉,我必须再次回到这里。但是我向text-overflow: ellipses
div添加了TextCut
属性,因为我需要将其截断,但之后它不会再次居中。它会回到左侧而不是应该在的中心。我试着自己解决了一个小时,但我真的很沮丧,我需要帮助。我再次添加了我的代码,谢谢你的帮助
答案 0 :(得分:1)
将margin: auto;
添加到#TextCut
$(function(){
$("#TextWrapper div:gt(0)").hide();
setInterval(function(){
var current = $('#TextWrapper div:visible');
var next = current.next().length ? current.next() : $('#TextWrapper div:eq(0)');
current.fadeOut(500);
next.fadeIn(500);
}, 1000);
});

.Border {
border: 1px solid black;
display: inline-flex;
height: 110px;
}
#ImgAndText {
text-align: center;
}
.Img {
width: 75px;
height:75px;
}
#TextWrapper, #TextWrapper1 {
font-family: Helvetica;
font-size: 13px;
padding: 5px 5px 5px 5px;
position: relative;
text-align: center;
}
#TextWrapper div, #TextWrapper1 div {
position: absolute;
text-align: center;
left: 0;
right: 0;
}
#TextCut {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
width: 50%;
margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="Border">
<div id="ImgAndText">
<img src="#" class="Img">
<div id="TextWrapper">
<div>Text</div>
<div id="TextCut">EvenMoreText</div>
</div>
</div>
</div>
&#13;