# "Read More" cut off function

**URL:** <https://discourse.gohugo.io/t/read-more-cut-off-function/20273>\
**Category:** support\
**Created:** [August 17, 2019, 2:46pm UTC](https://discourse.gohugo.io/t/read-more-cut-off-function/20273 "2019-08-17T14:46:44Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![vistad](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vistad/32/20509_2.png) [@vistad](https://discourse.gohugo.io/u/vistad)\
**Post date:** [August 17, 2019, 2:46pm UTC](https://discourse.gohugo.io/t/read-more-cut-off-function/20273/1 "2019-08-17T14:46:44Z")

</div>

There is a function that shows the first few lines of a blog article in the blog list and cuts off the rest of the text that can be accessed after pressing Read More button. Where is that function and how is it configured? There is a bug.

After loading a few articles into my blog directory I found they are shown in a peculiar way:

| 1st blog | 2nd blog |
| --- | --- |
| empty | 3rd blog |
| ------------ | ------------ |
| 4th blog | 5th blog |

I thought there were encoding errors, wrong unprinted chars, etc. But finally it turned out the 3-rd sentence in my text was a little long. The split function was to split it after the predefined amount of words - and put Read More button there - but it did not.

It left the sentence intact - which took more space and pushed the next page in the column down. After I cut the sentence shorter all pages did fit into their places.

Definitely I can put the `<!--more-->` sign manually - but Hugo is about automation, isn’t it?

---

<div class="post-metadata">

**Author:** ![Grob](https://avatars.discourse-cdn.com/v4/letter/g/f14d63/32.png) [@Grob](https://discourse.gohugo.io/u/Grob)\
**Post date:** [August 17, 2019, 2:53pm UTC](https://discourse.gohugo.io/t/read-more-cut-off-function/20273/2 "2019-08-17T14:53:29Z")

</div>

Hi!

Don’t know your context, but you can probably use {{ .Summary }} in your list file for that.

In `config.yml` you can set the summary length:

```auto
summaryLength: 30

```

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [August 17, 2019, 5:55pm UTC](https://discourse.gohugo.io/t/read-more-cut-off-function/20273/3 "2019-08-17T17:55:57Z")

</div>

@Grob is right. A related tip is this:

> **[truncate](https://gohugo.io/functions/truncate/)**
>
> Truncates a text to a max length without cutting words or leaving unclosed HTML tags.

Implemented by the Netlify CEO…

---

<div class="post-metadata">

**Author:** ![vistad](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vistad/32/20509_2.png) [@vistad](https://discourse.gohugo.io/u/vistad)\
**Post date:** [August 21, 2019, 6:56pm UTC](https://discourse.gohugo.io/t/read-more-cut-off-function/20273/4 "2019-08-21T18:56:52Z")

</div>

> [@Grob](#):
>
> summaryLength

Hello @Grob, thank you for the hint - it worked! May I ask you another - related - question: why the function that creates text in the {{ .Summary }} rips it of all formatting? Like all newlines are eliminated and headings converted into body text? The result is an unreadable monolithic block of text.

I also want to thank @bep for the truncate function reference. Bep, I know you do enormous amount of work here, but I want to tell you that current state of documentation is far from reaching its goal - to explain and clarify.

This is kind of initial documentation - it may be explanatory to those who rote it, but it is insufficient to newcomers, who it is targeted at. Thus, I read about the trancate function - but I don’t know how to use it - it is not shown. My suggestion is to complement each explanation with a brief working demo.

Yes, I know you will tell me to read documentation - and I will set aside couple months and read it all through as soon as I can! But people still need an answer to their question today!

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [August 21, 2019, 7:04pm UTC](https://discourse.gohugo.io/t/read-more-cut-off-function/20273/5 "2019-08-21T19:04:23Z")

</div>

@vistad the truncate function has an example usage in its doc.

---

<div class="post-metadata">

**Author:** ![Grob](https://avatars.discourse-cdn.com/v4/letter/g/f14d63/32.png) [@Grob](https://discourse.gohugo.io/u/Grob)\
**Post date:** [August 22, 2019, 2:30pm UTC](https://discourse.gohugo.io/t/read-more-cut-off-function/20273/6 "2019-08-22T14:30:17Z")

</div>

Hi @vistad!

Yes, the `.Summary` function removes or ‘truncates’ all HTML.

You can start with this piece of code:

```auto
{{ .Content | safeHTML | truncate 200 }}

```

This will keep your HTML and limit your content to 200 glyphs. If necessary you can combine `truncate` it with other functions like `htmlUnescape` or `plainify`.

---

<div class="post-metadata">

**Author:** ![vistad](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vistad/32/20509_2.png) [@vistad](https://discourse.gohugo.io/u/vistad)\
**Post date:** [August 22, 2019, 3:11pm UTC](https://discourse.gohugo.io/t/read-more-cut-off-function/20273/7 "2019-08-22T15:11:55Z")

</div>

Thank you! I’ve solved the issue with the length - but there’s another problem - the {{ .Summary }} rips off all newlines and formatting and turns the text from human-readable into human-unreadable!

How to preserve paragraphs, newlines, headers etc.?

---

<div class="post-metadata">

**Author:** ![vistad](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vistad/32/20509_2.png) [@vistad](https://discourse.gohugo.io/u/vistad)\
**Post date:** [August 22, 2019, 3:13pm UTC](https://discourse.gohugo.io/t/read-more-cut-off-function/20273/8 "2019-08-22T15:13:47Z")

</div>

Please tell me how to find that doc! I have no idea!

---

<div class="post-metadata">

**Author:** ![it-gro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/it-gro/32/4767_2.png) [@it-gro](https://discourse.gohugo.io/u/it-gro)\
**Post date:** [August 22, 2019, 3:32pm UTC](https://discourse.gohugo.io/t/read-more-cut-off-function/20273/9 "2019-08-22T15:32:59Z")

</div>

[https://gohugo.io/functions/truncate](https://gohugo.io/functions/truncate/)

---

<div class="post-metadata">

**Author:** ![Grob](https://avatars.discourse-cdn.com/v4/letter/g/f14d63/32.png) [@Grob](https://discourse.gohugo.io/u/Grob)\
**Post date:** [August 22, 2019, 4:34pm UTC](https://discourse.gohugo.io/t/read-more-cut-off-function/20273/10 "2019-08-22T16:34:51Z")

</div>

If you use my minimal example from above (instead of `.Summary`) HTML is not stripped and paragraphs will be preserved.

---

<div class="post-metadata">

**Author:** ![vistad](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vistad/32/20509_2.png) [@vistad](https://discourse.gohugo.io/u/vistad)\
**Post date:** [August 22, 2019, 4:48pm UTC](https://discourse.gohugo.io/t/read-more-cut-off-function/20273/11 "2019-08-22T16:48:10Z")

</div>

Thank you. It works a little different. Perhaps it requires adopting some rules of the paragraph length and placement of breaks and pictures to work nicely.

---

<div class="post-metadata">

**Author:** ![metakid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/metakid/32/12274_2.png) [@metakid](https://discourse.gohugo.io/u/metakid)\
**Post date:** [September 1, 2020, 10:16am UTC](https://discourse.gohugo.io/t/read-more-cut-off-function/20273/12 "2020-09-01T10:16:33Z")

</div>

So I have this partially working, what I am trying to do is show shortened versions of pages for mobile devices, as client wants it that way. Displaying the summaries with read more links using Summary no problem.

My question is, how do I then show the full text as the read more link just reloads the current page, which is showing a summary, having replaced the .Content with .Summary? What is the accepted way of doing this for pages that are not lists?

Thank you!

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [September 1, 2020, 12:54pm UTC](https://discourse.gohugo.io/t/read-more-cut-off-function/20273/13 "2020-09-01T12:54:52Z")

</div>

There are a few ways to approach it. One way is with plain old CSS. When the user clicks the “read more” button, just unhide the page content