CSS 文本溢出答案

【问题标题】：CSS Text OverflowCSS 文本溢出
【发布时间】：2013-05-14 04:14:33
【问题描述】：

我有一系列嵌套的 div，我试图让一个文本“TICKET NAME”溢出到另外两个上。

这是不想要的结果的图片：

这是我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div id="game_head">

    <div id="timer">
    </div>

    <div id="flags">
        <div id="best_of">
        </div>
    </div>

    <div id="team_1">
        <span class="team_name">Team 1</span>
    </div>

    <div id="ticket">
        <span class="versus">VS</span>
        <span class="ticket_name">TICKET NAME</span>
    </div>

    <div id="team_2">
        <span class="team_name">Team 2</span>
    </div>
</div>
<div id="game_body">

</div>

<body>
</body>
</html>

我的 CSS 如下所示：

#game_head {
    height: 62px;
    width: 555px;
    background-color: #CCC;
}
#timer {
    height: 100%;
    width: 26%;
    background-color:#111;
    float:left;
}
#flags {
    height: 100%;
    width: 4%;
    background-color:#333;
    float:left;
}
#best_of{
    height:33%;
    background-color:#F00;  
}
#team_1 {
    height: 100%;
    width: 31.5%;
    background-color:#999;
    float:left;
    text-align:center;
    display:table;
}
#team_2 {
    height: 100%;
    width: 31.5%;
    background-color:#999;
    float:left;
    text-align:center;
    display:table;
}
#ticket {
    height: 100%;
    width: 7%;
    background-color:#333;
    float:left;
    overflow:visible;
}
span.ticket_name{
    color:#FFF; 
}
span.team_name{
    display: table-cell;
    vertical-align: middle;
}
span.versus{
    color:#F00;
}

如何让“TICKET NAME”文本在“ticket”div 中居中，但溢出到“team_1”和“team_2”div 中？

提前致谢！

【问题讨论】：

标签： html css text overflow

【解决方案1】：

你可以将所有 div 设为绝对值，然后将票证的 z-index 设置为大于其余部分，并使其比它们更宽

【讨论】：