Web►Hexo

[Hexo] 將多餘的字省略

有時候標題太長，但又不想要全部顯示，只好做一些設定。

CSS

若要省略文字，可利用CSS語法。

1
2
3
4
5
li {
	overflow:hidden; //隱藏
	text-overflow:ellipsis; //顯示省略符號
	white-space: nowrap; //不換行
}

Hexo

知道基本語法後，觀察一下網頁的產生方式，知道是放在widget的class裡且標籤為li，但直接改動widget底下會照成其它跟著變動，為了避免麻煩就另外創個class給他，因此先到..\themes\landscape\layout\_widget\recent_posts.ejs裡將ul標籤新增class。

新增完後再到..\themes\landscape\source\css\_partial\sidebar-aside.styl新增以下代碼，如果你將class直接設置在li也是可以，如此一來後面的li就不用了。

1
2
3
4
.class名稱 li 
  overflow:hidden
  text-overflow:ellipsis
  white-space: nowrap

完整代碼

recent_posts.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<% if (site.posts.length){ %>
  <div class="widget-wrap">
    <h3 class="widget-title">Recents</h3>
    <div class="widget">
      <ul class="recent">
        <% site.posts.sort('date', -1).limit(10).each(function(post){ %>
          <li>
            <a href="<%- url_for(post.path) %>"><%= post.title || '(no title)' %></a>
          </li>
        <% }) %>
      </ul>
    </div>
  </div>
<% } %>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#sidebar
  @media mq-normal
    column(sidebar-column)
.widget-wrap
  margin: block-margin 0
.widget-title
  @extend $block-caption
.widget
  color: color-sidebar-text
  text-shadow: 0 1px #fff
  background: color-widget-background
  box-shadow: 0 -1px 4px color-widget-border inset
  border: 1px solid color-widget-border
  padding: 15px
  border-radius: 3px
  a
    color: color-link
    text-decoration: none
    &:hover
      text-decoration: underline
  ul, ol, dl
    ul, ol, dl
      margin-left: 15px
      list-style: disc
	  
.recent li
  overflow:hidden
  text-overflow:ellipsis
  white-space: nowrap