我正在尝试构建一个顶部导航栏，其中有一个居中的标题，当标题很长或屏幕宽度很窄时，该标题应该自动“省略”。为此，我想使用 text-overflow: ellipsis 属性，但似乎 text-overflow: ellipsis 要求元素具有宽度，这是一个问题，因为我有使我的标题元素成为 inline 元素。
目前我的 HTML 是
<body>
<div class="navbar">
<div class="navbar-container">
<ul class="pull-left">
<li>item1</li>
<li>item2</li>
</ul>
<h1 class="title">
<a href="#">My Title</a>
</h1>
<ul class="pull-right">
<li>item3</li>
<li>item4</li>
</ul>
</div>
</div>
</body>
还有我的 CSS:
body {
width: 100%
}
.navbar {
position: fixed;
text-align: center; border-bottom: 1px solid #cccccc;
width: inherit;
}
.navbar-container {
height: 20px;
padding: 20px 18px;
}
ul {
display:block;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: block;
float: left;
margin-right: 18px;
position: relative;
}
h1.title {
width: 200px;
display: inline;
font-size: 17px;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
是否有任何方法(更改 HTML 或 CSS)可以实现我的需要？
最佳答案
演示:http://jsfiddle.net/4CvRH/2/
您可以使用 inline-block而不是 inline如果你不想要你的 h1成为 block 级元素。
h1.title {
width: 200px;
display: inline-block;
font-size: 17px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
关于html - "ellipsisable"导航栏居中标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21764364/