MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

How to change spacing between lines

  • Hi all,

    I am trying to make a slight modification to a module that was discussed in this forum post:

    This module does an excellent job of displaying the contents of a text file (and also seems to support some html formatting). However, when displaying this you see large spaces between each new line of text. I would love it if there is some way to alter this and have more “normal” spacing between each line. Can anyone help with this?

    below is the current contents of the following files…


        defaults: {
        updateInterval: 30 * 60 * 1000 //reads the file every 30 mins
    start: function(){
        this.sendSocketNotification('START', this.config);
    socketNotificationReceived: function(notification, payload) {
        if(notification === 'DATA'){
            this.dataFile = payload;
    getDom: function(){
        var wrapper = document.createElement('div');
            wrapper.innerHTML = this.dataFile;
        } else {
            wrapper.innerHTML = 'No data';
        return wrapper;


    const NodeHelper = require("node_helper");
    const fs= require("fs");
    module.exports = NodeHelper.create({
        socketNotificationReceived: function(notification, payload) {
        if(notification === 'START'){
            this.config = payload;
            setInterval(() => {
            }, this.config.updateInterval);
    readData: function(){
        //to read a file to do the following
        fs.readFile('/home/pi/MagicMirror/modules/MMM-Text/mmText.txt', 'utf8', (err, data) => {
            if (err) throw err;
            this.sendSocketNotification('DATA', data);

    example of mmText.txt (the file that will be displayed):

    < font size="3" >
    Attic: 85°<br />
    Crawlspace: 77°<br />
    Den: 77°<br />
    Rack: 71°<br />
    < /font >

  • Figured I would post the answer I came up with to solve this in case anyone else runs into the same problem - I wrapped the text in a < p > and added line-height styling to that - see below for an example:

    < font size="3" >
    < p style="line-height:100%" >
    Attic: 112°<br />
    Crawlspace: 80°<br />
    Den: 80°<br />
    Rack: 71°<br />
    Garage: 77°<br />
    < /p >
    < /font >

  • For my curiosity. What is the use case behind here? What is the content of that text file?

  • there are temperatures that are gathered by other computers in other locations in my house and I am trying to monitor those values - I have a script from another computer that builds this text file each hour and copies it to the magic mirror.

  • Project Sponsor Module Developer

    A couple different things you can do here…

    One put the data in a table…
    You could just either use CSS to do this OR create your element like this:

                    var foo= document.createElement("p");
    	        foo.classList.add("whatever ");   CSS
    	       foo.setAttribute('style', 'line-height: 20%;');  No CSS```

Log in to reply