Question

I'm currently hacking some slides with reveal.js and wondering how to prevent line breaks inside words on headings? Maybe I just missed the part of the documentation, but having no clue.

So e.g. having <h1>Some reallongword</h1> ends up in <h1>Some reall \n ongword</h1>

Update: I've added a manual <br> into headline etc. Not sure whether it's the best solution, but seems to work at least.

Was it helpful?

Solution

A month late, but posting for reference.

/css/reveal.css has this somewhere at line 70

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;

    word-wrap: break-word;
    line-height: 1;
}

You can either change that to

-webkit-hyphens: manual;
   -moz-hyphens: manual;
        hyphens: manual;

word-wrap: normal;

or embed the changes in index.html itself.

<style type="text/css">
        .reveal h1,
        .reveal h2,
        .reveal h3,
        .reveal h4,
        .reveal h5,
        .reveal h6 {
            word-wrap: normal;
            -webkit-hyphens: manual;
            -moz-hyphens: manual;
            hyphens: manual;
        }
    </style>

Tested in Firefox and Chromium. Not sure if it can work in a custom theme though.

edit: whoops, typo.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top