Formatting Text On Webpage

Question

I am currently working on a personal webpage and wanted to know if there is a way to write CSS code to create a new line whenever text covers half the page. I googled a lot and only came up with pointless background tips and tricks (at least for this issue.) Any help would be appreciated. Thanks!

Answer 1

By applying a width to the content's container, you can force the text to wrap at a certain point. Widths can be defined in absolute units, like pixels, but also in relative units, like percentages.

This does not technically insert a newline in the content. Inserting a literal "newline character" (\n) actually would not have a visual impact on the page, because all consecutive whitespace (newlines, tabs, spaces, etc.) in HTML is always condensed into a single space.

If you want to insert a break tag (<br>) at certain points in the HTML, you cannot do this with CSS. CSS is a set of presentation rules, not a method of modifying the HTML markup. JavaScript can modify the rendered DOM, which (while not technically modifying the markup directly), modifies the final rendered HTML that a browser loads.

If you want to modify all of the markup, you will need to do it manually before publishing, or write a script to modify all of the files as text before publishing.

p {
  width: 50%;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum in turpis non egestas. Nunc feugiat fermentum mi, vel pulvinar libero condimentum vel. Ut nisi est, consectetur ut lectus nec, mattis interdum nibh. Etiam ut interdum est. Nulla
  dictum ornare risus et scelerisque. In sodales a sem in aliquet. Donec at luctus orci, nec hendrerit tortor. Integer feugiat a metus ac sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ac
  erat ut sem congue aliquet. Ut tellus ligula, fringilla vel egestas ut, facilisis posuere urna. Praesent condimentum ipsum et sapien pretium bibendum. Praesent feugiat sem lacus, ut ultricies quam convallis quis. Cras malesuada nunc in velit iaculis,
  vel tincidunt purus aliquet. Etiam tempus metus quis vulputate placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent posuere, erat ut sollicitudin accumsan, dui dui dapibus arcu, a tincidunt
  ex neque vel lacus. Vestibulum pulvinar felis sit amet justo ultrices interdum. Vestibulum ultrices urna nec purus consectetur porta. Vestibulum id cursus turpis, eget iaculis erat. Proin efficitur pulvinar velit. Maecenas vel odio urna. Donec suscipit
  placerat varius. Donec sapien ante, interdum et mauris id, egestas posuere lectus. Sed mauris nunc, finibus sed magna ac, consequat efficitur erat. Etiam dignissim velit ante, at bibendum urna cursus sit amet. Nullam suscipit blandit nulla vitae auctor.
  Proin in tellus nibh. Praesent pellentesque sem nisl, at semper felis cursus a. Nullam tempor varius enim. Suspendisse pharetra at lectus sit amet maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum
  sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin elementum pellentesque mollis. Fusce commodo commodo urna, in euismod est ornare a. Integer dictum aliquet velit. Aliquam erat volutpat. Sed dictum ligula at elementum
  placerat. Integer eget consequat turpis, a bibendum risus. Nulla facilisi. Ut ac malesuada eros, bibendum cursus leo. Fusce non lacinia erat. Aenean quis euismod nulla, nec auctor lectus. Integer varius, turpis et volutpat iaculis, lectus enim ullamcorper
  libero, ut ullamcorper sem ligula in mi. Fusce elementum, dui ac posuere cursus, nunc felis lacinia mi, et egestas turpis tellus eu erat. Donec pulvinar nibh id massa tristique, et maximus velit efficitur. Nam ullamcorper, eros et mattis vestibulum,
  diam ligula dapibus eros, id hendrerit eros lorem eget mauris. Nullam tincidunt sit amet mauris et tincidunt. Vivamus semper sem in hendrerit consequat. Aenean laoreet, justo non egestas tristique, ligula enim venenatis ex, sed lobortis magna risus
  at nulla. Donec vulputate mi nec urna euismod, vel pellentesque lacus rutrum. Aliquam condimentum lacus risus, non faucibus nulla tempor in. Ut fermentum fringilla dignissim. In auctor, nisi ut convallis lobortis, risus magna convallis erat, sit amet
  imperdiet sapien dui ac erat. Vestibulum congue ut lorem in auctor. Maecenas bibendum eros ut sem dictum finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eu justo quis diam mollis pretium
  gravida sed felis.
</p>

Answer 2

In it's simplest form:

<div style="width:50%;">
   Content here....
</div>

http://jsfiddle.net/1y70e1ms/