How do I prevent DIV tag starting a new line?

user_77174 0
Viewed 191974

I want to output a single line of text to the browser that contains a tag. When this is rendered it appears that the DIV causes a new line. How can I include the content in the div tag on the same line - here is my code.

<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
<div id="contentInfo_new">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>

I have tried to tidy it up here. How can I have this display on a single line?

css html
11 Answers

A better way to do a break line is using span with CSS style parameter white-space: nowrap;

span.nobreak {
  white-space: nowrap;
}

or
span.nobreak {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Example directly in your HTML

<span style='overflow:hidden; white-space: nowrap;'> YOUR EXTENSIVE TEXT THAT YOU CAN´T BREAK LINE ....</span>
user_137172960

Use css property - white-space: nowrap;

user_73104290 
overflow-x: scroll;
width: max-content;

Worked for me, hope this helps someone else.

(Use case: I had a lot of divs in a row that were breaking to the next line, but I wanted the user to scroll to the right instead in this case)

user_49079500

Late answer in 2022:

If you are using 2 div element, white-space: nowrap won't works, instead wrap them by a div by display: flex along with flex-wrap: nowrap (which is default enabled).

This solution work well when you have multiple divs in a row, but you need 2 of them always on the same row when responsive in small screen device. inline solution can't achieve this (unless with nowrap).

div.wrapper-whitespace, div.wrapper-whitespace-with-inline {
  white-space: nowrap;
}

div.wrapper-whitespace-with-inline > div.item {
  display: inline;
}

div.wrapper-flex {
  display: flex;
  flex-wrap: nowrap; /* this is default */
}

div.item {
 border: 1px solid black;
 width: 100px;
}
<div class='item'>div</div>
<div class='item'>div</div>

<br>

<div class='wrapper-whitespace'>
  <div class='item'>div</div>
  <div class='item'>div</div>
</div>

<br>

<div class='wrapper-whitespace-with-inline'>
  <div class='item'>div</div>
  <div class='item'>div</div>
</div>

<br>

<div class='wrapper-flex'>
  <div class='item'>div</div>
  <div class='item'>div</div>
</div>

user_81535050
Related