Cause Line to Wrap to New Line After 100 Characters

Cause line to wrap to new line after 100 characters

Your line isn't breaking naturally because you don;t have any spaces in it. You can use word-wrap to force the breaks, then add a max-width to say how wide it can be.

CSS

li{
    max-width:200px;
    word-wrap:break-word;
}

HTML

<ul>
    <li>Hello</li>
    <li>How are you</li>
    <li>SearchImagesMapsPla yYouTubeNewsGmailDriveMoreCalendarTranslat eMobileBooksOffersWalletShoppingBloggerFin ancePhotosVideosEven more »Account OptionsSign inSearch...</li>
    <li>SearchImagesMapsPla yYouTubeNewsGmailDriveMoreCalendarTranslateMobileBooksOffersWalletShoppingBloggerFinancePhotosVideosEvenmore»AccountOptionsSigninSearch...</li>
</ul>

http://jsfiddle.net/daCrosby/ZC3zK/1/

You'd need JavaScript to count exactly 100 characters and break the line there. Check here and here for JavaScript examples.

How to break after n characters with CSS?

You can use a monospace font which renders all characters at the same width and word-wrap:break-word, but the 20ch here in the snippet will result in 16 characters for some reason, so you'll need to find a setting that allows 20 characters, which here in my setup (Firefox on Mac) is 24ch:

td {
  font-family: monospace;
  border: 1px solid #ddd;
  max-width: 24ch;
  word-wrap:break-word;
}

<table>
  <td>
    oiuhncoiuhOOSFwrevi987OINDVouhnweoriuhneaörlvjneriunONVWöoiunoiSAJunwrvwoiunVA
  </td>
</table>

A good way to make long strings wrap to newline?

You could use textwrap module:

>>> import textwrap
>>> strs = "In my project, I have a bunch of strings that are read in from a file. Most of them, when printed in the command console, exceed 80 characters in length and wrap around, looking ugly."
>>> print(textwrap.fill(strs, 20))
In my project, I
have a bunch of
strings that are
read in from a file.
Most of them, when
printed in the
command console,
exceed 80 characters
in length and wrap
around, looking
ugly.

help on textwrap.fill:

>>> textwrap.fill?

Definition: textwrap.fill(text, width=70, **kwargs)
Docstring:
Fill a single paragraph of text, returning a new string.

Reformat the single paragraph in 'text' to fit in lines of no more
than 'width' columns, and return a new string containing the entire
wrapped paragraph.  As with wrap(), tabs are expanded and other
whitespace characters converted to space.  See TextWrapper class for
available keyword args to customize wrapping behaviour.

Use regex if you don't want to merge a line into another line:

import re

strs = """In my project, I have a bunch of strings that are.
Read in from a file.
Most of them, when printed in the command console, exceed 80.
Characters in length and wrap around, looking ugly."""

print('\n'.join(line.strip() for line in re.findall(r'.{1,40}(?:\s+|$)', strs)))

# Reading a single line at once:
for x in strs.splitlines():
    print '\n'.join(line.strip() for line in re.findall(r'.{1,40}(?:\s+|$)', x))

output:

In my project, I have a bunch of strings
that are.
Read in from a file.
Most of them, when printed in the
command console, exceed 80.
Characters in length and wrap around,
looking ugly.

Wrap entire span on new line if doesn't fit

The <span> tag is inline by default, so the text inside will break when wrapping happens. You can set it to display: inline-block so that it renders as a whole block also remains inline level. Note, wrapping may still happen but only if the text length exceeds the parent container.

.post-short-meta-container span {
  ...
  display: inline-block;
}

display: inline-block The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would) - MDN

And for the layout you're trying to achieve, you can wrap the text "Read more" into a <a> tag, and set the button link style on it instead of the table cell, see the updated demo below.

jsFiddle

.post-short-footer {

  display: table;

  width: 100%;

}

.read-more-post {

  height: 100%;

  display: table-cell;

  vertical-align: middle;

  width: 20%;

  text-align: center;

}

.read-more-post a {

  white-space: nowrap;

  border: 1px solid #3b9be5;

  padding: 0.6em 0.6em;

  border-radius: 0.3em;

  display: block;

}

.post-short-meta-container {

  display: table-cell;

  padding-left: 1em;

  width: 80%;

  line-height: 100%;

  vertical-align: middle;

  height: 100%;

}

.post-short-meta-container span {

  display: inline-block;

  padding: 0.3em;

  margin: 0.3em;

  border: 1px dotted red;

}

<div class="post-short-footer">

  <div class="read-more-post">

    <a href="#">Read more</a>

  </div>

  <div class="post-short-meta-container">

    <span>Some text here</span>

    <span>Some text here</span>

    <span>Some text here</span>

    <span>Some text here</span>

    <span>Some text here</span>

  </div>

</div>

Add line break after every 20 characters and save result as a new string

You probably want to do something like this

inp = "A very very long string from user input"
new_input = ""
for i, letter in enumerate(inp):
    if i % 20 == 0:
        new_input += '\n'
    new_input += letter

# this is just because at the beginning too a `\n` character gets added
new_input = new_input[1:] 

Java - parse String and add Line break every 100 characters

You could do something like so:

String str = "....";
String parsedStr = str.replaceAll("(.{100})", "$1\n");

This will replace every 100 characters with the same 100 characters and add a new line at the end.

The (.{100}) will capture a group of 100 characters. The $1 in the second will put the content of the group. The \n will be then appended to the 100 characters which have been just matched.

How to force a line break in a long word in a DIV?

Use word-wrap:break-word;

It even works in IE6, which is a pleasant surprise.

---

word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser. IE, being a dead browser, will forever rely on the deprecated and non-standard word-wrap instead.

Existing uses of word-wrap today still work as it is an alias for overflow-wrap per the specification.

Insert Break After Wrapping Width 80 characters in Sublime Text 3

Check out AutoWrap. It will hard wrap automatically whenever you hit the ruler. It works nearly perfectly for me.

How to insert a newline character after every 200 characters with jQuery

Break the string after every 200 characters, add a newline, and repeat this process with the remaining string:

function addNewlines(str) {
  var result = '';
  while (str.length > 0) {
    result += str.substring(0, 200) + '\n';
    str = str.substring(200);
  }
  return result;
}

---

Related Topics