75

I'm new in thymeleaf and I try to create a template. My problem is this code:

<h1 th:text="${header.title}" >
   title
   <small th:text="${header.subtitle}" >Subtitle</small>
</h1>

I would like to get this output:

<h1> TITLE <small> SUBTITLE</small> </h1>

But this is the real output:

<h1> TITLE </h1>

How can I do it, so it does not remove what is inside of "small"?

blackraven
  • 5,284
  • 7
  • 19
  • 45
JohnPortella
  • 1,791
  • 5
  • 21
  • 30

4 Answers4

189

I faced the same problem. The answer is th:inline='text'

This should solve your issue

<h1 th:inline="text" >
   [[${header.title}]]
   <small th:text="${header.subtitle}">Subtitle</small>
</h1>

or you can also use th:remove="tag"

<h1>
    <span th:text="${header.title}" th:remove="tag">title</span>
    <small th:text="${header.subtitle}" >Subtitle</small>
</h1>
Faraj Farook
  • 14,385
  • 16
  • 71
  • 97
  • 2
    Out of all the other answers, this one was the most useful and to the point. It solved my problem exactly. – Josh Stark Oct 23 '15 at 17:24
  • 2
    For reference on inlining see: http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#inlining – David V Dec 29 '15 at 16:46
  • 1
    Why not `th:utext`? – Nick Oct 06 '17 at 09:55
  • In my case, static text was getting removed by th:(u)text. This solution fixed it. – alextsil Nov 22 '17 at 18:13
  • @NickSavenia - `th:utext` would work but is a "dirtier" sollution because it means mixing the text to be displayed with the formatting and this will be harder to mantain. That's why we externalize static text to properties files. – wi2ard Mar 12 '18 at 15:31
15

Regardless of the semantics of tags, the correct answer is this one:

<h1>
    <span th:text="${header.title}" th:remove="tag">title</span>
    <small th:text="${header.subtitle}" >Subtitle</small>
</h1>

In this way Thymeleaf removes the <span> tag and the result is what you expect:

<h1> 
    TITLE 
    <small>SUBTITLE</small> 
</h1>
Jaap
  • 641
  • 12
  • 19
Emiliano Schiano
  • 1,862
  • 1
  • 25
  • 30
6

in addition to @Faraj response, you can also use th:block like this

<h1>
   <th:block th:utext="${header.title}"/>
   <small th:text="${header.subtitle}" >Subtitle</small>
</h1>
rvazquezglez
  • 2,284
  • 28
  • 40
2

I'm not sure what you are trying, since the small tags in your h1 will not appear small. The Thymeleaf th:text tag will replace all the text in your h1 tag, that is the reason your output only shows "TITLE". You should place the <small> tags outside your h1 tag.

<h1 th:text="${header.title}">title</h1>

<small th:text="${header.subtitle}">Subtitle</small>

And I believe you are looking for this answer: 

<h1>
   <span th:text="${header.title}" th:remove="tag">title</span>
   <small th:text="${header.subtitle}">Subtitle</small>
</h1>

Michiel Bijlsma
  • 583
  • 5
  • 10