Question

我正在尝试构建一个顶部导航栏，其中有一个居中的标题，当标题很长或屏幕宽度很窄时，该标题应自动“省略”。为此，我想使用text-overflow: ellipsis属性，但似乎text-overflow: ellipsis要求元素具有宽度，这是一个问题因为我必须使我的title元素成为inline元素。 / p>

目前我的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）？

Answer 1

演示：http://jsfiddle.net/4CvRH/2/

如果您不希望inline-block成为块级元素，则可以使用inline代替h1。

h1.title {
    width: 200px;
    display: inline-block;
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

＆＃34; ellipsisable＆＃34;导航栏居中标题

1 个答案: