javascript on a webpage displaying text wrongly

Question

I have JS code on a webpage that loads questions in from mysql db and displays the text . What happens is that it cuts off words at the end of the line and continues the word on the next line at the start. So all text across the screen starts/ends at the same point.

This seems to be the code where it displays the text.

For example the text will look like at the end of a line 'cont' and then on next line at the start 'inue'.

How do i fix this?

var questions = <?=$questions;?>;

// Initialize variables
//------------------------------------------------------------------

var tags;
var tagsClass = '';
var liTagsid = [];
var correctAns = 0;
var isscorrect = 0;
var quizPage = 1;


var currentIndex = 0;
var currentQuestion = questions[currentIndex];

var prevousQuestion;
var previousIndex = 0;

var ulTag = document.getElementsByClassName('ulclass')[0];
var button = document.getElementById('submit');
var questionTitle = document.getElementById('question');

//save class name so it can be reused easily
//if I want to change it, I have to change it one place
var classHighlight = 'selected';


// Display Answers and hightlight selected item
//------------------------------------------------------------------
function showQuestions (){
document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
  if (currentIndex != 0) {
    // create again submit button only for next pages
    ulTag.innerHTML ='';
    button.innerHTML = 'Submit';
    button.className = 'submit';
    button.id = 'submit';
    
    if(quizPage<=questions.length){
        //update the number of questions displayed
    document.getElementById('quizNumber').innerHTML = quizPage;    
    }
    
  }

  //Display Results in the final page
  if (currentIndex ==  (questions.length)) {
    ulTag.innerHTML = '';
    document.getElementById('question').innerHTML = '';
    if(button.id == 'submit'){
        button.className = 'buttonload';
        button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Loading';
    }
    showResults();
    return
  }

  questionTitle.innerHTML = "Question No:" + quizPage  + " "+currentQuestion.question.category_name +"<br/>"+ currentQuestion.question.text;
  if(currentQuestion.question.filename !== ''){
        var br = document.createElement('br');
         questionTitle .appendChild(br);
        var img = document.createElement('img');
            img.src = currentQuestion.question.filename;
            img.className = 'imagecenter';
            img.width = 750;
            img.height = 350;
          questionTitle .appendChild(img);
  }
  // create a for loop to generate the options and display them in the page
  for (var i = 0; i < currentQuestion.options.length; i++) {
    // creating options
    var newAns = document.createElement('li');
    newAns.id = 'ans'+ (i+1);
    newAns.className = "notSelected listyle";
    var textAns = document.createTextNode(currentQuestion.options[i].optiontext);
    newAns.appendChild(textAns);
    
     if(currentQuestion.options[i].file !== ''){
           var br = document.createElement('br');
         newAns .appendChild(br);
        var img1 = document.createElement('img');
            img1.src = currentQuestion.options[i].file;
            img1.className = 'optionimg';
            img1.width = 250;
            img1.height = 250;
          newAns .appendChild(img1);
           newAns .appendChild(br);
  }
    var addNewAnsHere = document.getElementById('options');
    addNewAnsHere.appendChild(newAns);
  }


  //.click() will return the result of $('.notSelected')
    var $liTags = $('.notSelected').click(function(list) {
        
        list.preventDefault();
        //run removeClass on every element
        //if the elements are not static, you might want to rerun $('.notSelected')
        //instead of the saved $litTags
        $liTags.removeClass(classHighlight);
        //add the class to the currently clicked element (this)
        $(this).addClass(classHighlight);

        //get id name of clicked answer
        for (var i = 0; i < currentQuestion.options.length ; i++) {
          // console.log(liTagsid[i]);
          if($liTags[i].className == "notSelected listyle selected"){
            //store information to check answer
            tags = $liTags[i].id;
            // tagsClass = $LiTags.className;
            
            tagsClassName = $liTags[i];
          }
        }
    });

    //check answer once it has been submitted
    button.onclick = function (){
        if(button.id == 'submit'){
        button.className = 'buttonload';
        button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Loading';
    } 
    setTimeout(function() { checkAnswer(); }, 100);
    };
}

//self calling function
showQuestions();

The website is on my local now but i can upload a screenimage if need be and the whole code of the webpage. Or is the issue in html?

edit: here is html/css code

<style>
/*========================================================
          Quiz Section
========================================================*/
/*styling quiz area*/
.main {
  background-color: white;
  margin: 0 auto;
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  /*white-space:  nowrap;*/
}

/*Editing the number of questions*/
 .spanclass {
  font-size: x-large;
}
#pages{
    border: 3px solid;
    display: inline-flex;
    border-radius: 0.5em;
    float: right;
    
}
#question{
    word-break: break-all;
}
/*format text*/
p {
    text-align: left;
    font-size: x-large;
    padding: 10px 10px 0;
}
.optionimg{
    border: 2px solid black;
    border-radius: 1.5em;
}

/*Form area width*/

/*formatting answers*/
 .listyle {
    list-style-type: none;
    text-align: left;
    background-color: transparent;
    margin: 10px 5px;
    padding: 5px 10px;
   border: 1px solid lightgray;
    border-radius: 0.5em;
    font-weight: normal;
    font-size: x-large;
    display: inline-grid;
    width: 48%;
    height: 300px;
        overflow: auto;
}

 .listyle:hover {
  background: #ECEEF0;
      cursor: pointer;
}

/*Change effect of question when the questions is selected*/
.selected, .selected:hover {
  background: #FFDEAD;
}

/*change correct answer background*/
.correct, .correct:hover {
  background: #9ACD32;
  color: white;
}

/*change wrong answer background*/
.wrong, .wrong:hover {
  background: #db3c3c;
  color: white;
}

/*========================================================
        Submit Button
========================================================*/
.main button {
   text-transform: uppercase;
  width: 20%;
  border: none;
  padding: 15px;
  color: #FFFFFF;
}

.submit:hover, .submit:active, .submit:focus {
  background: #43A047;
}

.submit {
  background: #4CAF50;
  min-width: 120px;
}

/*next question button*/
.next {
  background: #fa994a;
  min-width: 120px;
}

.next:hover, .next:active, .next:focus {
  background: #e38a42;
}

.restart {
  background-color:
}

/*========================================================
        Results
========================================================*/
.circle{
  position: relative;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  background: #bdc3c7;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  overflow: hidden;
}

.fill{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80%;
  background: #31a2ac;
}

.score {
  position: absolute;
  width: 100%;
  top: 1.7em;
  text-align: center;
  font-family: Arial, sans-serif;
  color: #fff;
  font-size: 40pt;
  line-height: 0;
  font-weight: normal;
}

.circle p {
  margin: 400px;
}


/*========================================================
        Confeeti Effect
========================================================*/
canvas{
  position:absolute;
    left:0;
    top:11em;
    z-index:0;
    border:0px solid #000;
}
.imagecenter{
        display: block;
    margin: 0 auto;
}

.buttonload {
  background-color: #04AA6D; /* Green background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 12px 24px; /* Some padding */
  font-size: 16px; /* Set a font-size */
}
/* Add a right margin to each icon */
.fa {
  margin-left: -12px;
  margin-right: 8px;
}




@media only screen and (max-width: 900px){
.listyle {
    width: 100% !important;
    height: auto !important;
}
.imagecenter {
    width: 100% !important;
}
.listyle img{
    width: inherit !important;
     height: unset !important;
    
}
.ulclass
{
    padding:0px !important;
}
}
</style>
   <!-- Main page -->
        <div class="main">
          <!-- Number of Question  -->
          <div class="wrapper" id="pages">
            <span class="spanclass" id="quizNumber">1</span><span class="spanclass">/<?=$count?></span>
          </div>
          
          <!-- Quiz Question -->
          <div class="quiz-questions" id="display-area">
            <p id="question"></p>
            <ul class="ulclass" id="options">
            </ul>

            <div id="quiz-results" class="text-center">
              <button type="button" name="button" class="submit" id="submit">Submit</button>
            </div>
          </div>

        </div>

        <canvas id="canvas"></canvas>

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>

Answer 1

I'm guessing that #question{ word-break: break-all; } is probably the culprit then? – CB..yes that fixed it:)