gpt4 book ai didi

html - "ellipsisable"导航栏居中标题

转载 作者:行者123 更新时间:2023-11-28 12:58:56 24 4
gpt4 key购买 nike

我正在尝试构建一个顶部导航栏,其中有一个居中的标题,当标题很长或屏幕宽度很窄时,该标题应该自动“省略”。为此,我想使用 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;
}

http://jsfiddle.net/4CvRH/

是否有任何方法(更改 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com