Large words showing wrong in phone view - html

I have a text with one large word and it's broke the phone view.
Please see the picture attached.
picture here


apply the word-wrap CSS property on your content
* { word-wrap: break-word }
you'll better off if you are a bit more specific with your selector instead of '*' like:
p { word-wrap: break-word }
this will allow the long word(s) to be broken and wrapped onto the next line.


You can use this, just apply the CSS to the text container.
.word-wrap {
word-wrap: break-word; /* IE 5.5-7 */
white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
white-space: pre-wrap; /* current browsers */
}

Related

Inline Span Bug(?) [duplicate]

I have a long string (a DNA sequence). It does not contain any whitespace character.
For example:
ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA
What would be the CSS selector to force this text to be wrapped in a html:textarea or in a xul:textbox?

for block elements:
<textarea style="width:100px; word-wrap:break-word;">
ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</textarea>
for inline elements:
<span style="width:100px; word-wrap:break-word; display:inline-block;">
ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</span>

Place zero-width spaces at the points where you want to allow breaks. The zero-width space is ​ in HTML. For example:
ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC

Here are some very useful answers:
How to prevent long words from breaking my div?
to save you time, this can be solved with css:
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
word-break: break-all;

For me this works,
<td width="170px" style="word-wrap:break-word;">
<div style="width:140px;overflow:auto">
LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT
</div>
</td>
You can also use a div inside another div instead of td. I used overflow:auto, as it shows all the text both in my Opera and IE browsers.

I don't think you can do this with CSS. Instead, at regular 'word lengths' along the string, insert an HTML soft-hyphen:
ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG
This will display a hyphen at the end of the line, where it wraps, which may or may not be what you want.
Note Safari seems to wrap the long string in a <textarea> anyway, unlike Firefox.

Use a CSS method to force wrap a string that has no white-spaces. Three methods:
1) Use the CSS white-space property. To cover browser inconsistencies, you have to declare it several ways. So just put your looooong string into some block level element (e.g., div, pre, p) and give that element the following css:
some_block_level_tag {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
2) use the force-wrap mixin from Compass.
3) I was just looking into this as well and I think might also work (but I need to test browser support more completely):
.break-me {
word-wrap: break-word;
overflow-wrap: break-word;
}
Reference: wrapping content

My way to go (when there is no appropiate way to insert special chars) via CSS:
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
As found here: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
with some additional research to be found there.

For word-wrap:break-word; to work for me, I had to make sure the display was set to block, and that the width was set on the element. In Safari, it had to have a p tag and the width had to be set in ex.

Use <wbr>tag:
ACTGATCG<wbr>AGCTGAAG<wbr>CGCAGTGC<wbr>GATGCTTC<wbr>GATGATGC
I think this is better than using zero-width space ​ which could cause problems when you copy the text.

If you're using PHP then the wordwrap function works well for this:
http://php.net/manual/en/function.wordwrap.php
The CSS solution word-wrap: break-word; does not seem to be consistent across all browsers.
Other server-side languages have similar functions - or can be hand built.
Here's how the the PHP wordwrap function works:
$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";
$wrappedstring = wordwrap($string,50,"<br>",true);
This wraps the string at 50 characters with a <br> tag. The 'true' parameter forces the string to be cut.

<textarea style="width:100px; word-wrap:break-word;">
place your text here
</textarea>

In a case where the table isnt of fixed size, below line worked for me:
style="width:110px; word-break: break-all;"

In case if you use Bootstrap, better case for you is use this class "text-break".
Example:
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
More informationg you should get in official Bootstrap documentation page

Simply:
word-break: break-word;

just setting width and adding float worked for me :-)
width:100%;
float:left;

Here is the code I come into using white-space: pre-wrap;
.code {
width: 90vw;
white-space: pre-wrap;
font-family: inherit;
word-break: break-word;
overflow-wrap: break-word;
line-break: auto;
}
I know the with value is looks odd,you should change it to value fits your needs .

Move to newline when tabbing/spacing to end of contenteditable div

Recently I have been having a few issues with using a content editable div as a text box for a project I have been working on. The project is built with Angular2 on the front-end.
The issue I have been having is when I go to tab/space all the way to the end of the content editable div, rather than moving to the next line, it instead keeps adding tabs that appear to accumulate in the text content of the div. By that I mean, if I hit the tab/space key 4 times once it reaches the end, I will then have to backspace 4 times to clear them out.
<div class="text-box" contenteditable="true"></div>
body
{
background-color: black;
}
.text-box
{
background-color: white;
color: black;
height: 200px;
width: 200px;
margin: auto;
white-space: pre-wrap;
}
https://codepen.io/anon/pen/YxYNYW
The code pen I included demonstrates the issue. If you just click inside the box and then hold space bar, once the cursor gets to the end, it will not move to a newline. I realize it has something to do with the white-space: pre-wrap property I use with the content editable div. Is there anyway to get this to work while still being able to use that property?
I would like to keep the pre-wrap property because it preserves all the white-space that is brought in from objects with text in the database. I tried it with the pre-line property over pre-wrap but that caused the text to jump when clicking into the editable div. I also tried using word-break: break-all which seemed to work but then the text gets a little messed up.
Also on a side note, has anyone ever experienced an issue where they were unable to click between characters once the text was highlighted? This is kind of a weird issue to describe, and a tough one to track down apparently. What happens is I will type some text into the div, highlight it with my cursor, and then if I try to deselect the text by clicking in between characters, it will not work. I will have to click a line that is currently not highlighted or outside of the element entirely to deselect any highlighted text.
I originally thought maybe it was a content editable issue, but it seems to be working fine in the code pen I linked, so now I am not sure what it is.
Thanks in advance for the help!

You have to use word-break for solving your issue.Modify your css like following
body
{
background-color: black;
}
.text-box
{
background-color: white;
color: black;
height: 200px;
width:150px;
margin: auto;
white-space: pre-wrap;
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-word;
white-space: normal;
}
This solves your problem.Here is the working pen pen
Please reffer this ans for more info

Responsive pre tag

I simply want to show terminal output on a Webpage. Atm I'm using a pre tag to do that with pre { white-space: pre-wrap; } as you can see upon http://irc.dabase.com/.
My problem is that when I rotate my iPhone6 IOS device, it often doesn't reformat properly. Why is this? Can you offer some good CSS rules to make this use case of showing terminal output on a Webpage better?

pre {
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
}
Here are the rules you need explained step by step:
Select all pre elements (set this to pre#yourID or pre.yourClass to select a specific pre)
pre {
Allow pre to wrap at word breaks and line breaks. Unlike pre-line, pre-wrap will not modify your terminal output at all. pre-line will modify your terminal output by condensing whitespace into one whitespace which could make finding exact phrases difficult or mess with whitespace column formatting! See here
white-space: pre-wrap;
Make sure that words that go past the end of the element break off instead of being hidden (like links for examples)
word-wrap: break-word;
This part is optional Justify the text so that it fully fills the line. Spaces become wider but their number is not increased.
text-align: justify;
}
Optionally, this rule can be fit into a media-query so that it only applies in the mobile version. But I believe there is no harm in applying this rule to all screen sizes by simply omitting a media-query.
In the event that the wider version of your iphone makes your pre rule stop working, you should check to see if there isn't already a media-query in place that is applying a rule to the pre when the screen reaches a certain size.
You can also try intentionally creating a media-query for the wider version, which may re-initialize the styles if there is some kind of bug going on.
For example:
Include rule that applies to smallest possible version
Rule A:
pre {
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
}
Then in addition to rule A include another rule to re-initialize styles at landscape orientation
Rule B:
#media all and (orientation:landscape)
pre {
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
}
}

You can try this to achieve -
pre {
white-space: pre-line;
word-wrap: break-word;
}

pre {
white-space: pre-line;
word-wrap: break-word;
text-align: justify;
}
You Can Try It Once

This worked nicely for me when I had pre tag inside of a table and code below made pre tag stay responsive to the table column width. Credits to: https://techstacker.com/responsive-pre-tags-css/
pre {
white-space: pre-wrap;
word-break: break-all;
}

Issue with text wrap on IE10 with brackets

I have a link in a navigation menu that doesn't wrap properly on IE10.
When there is a conditional plural using brackets, IE10 cut off the word into 2 separated lines. I am expecting the whole word "link(s)" to go to the next line if there is not enough space, like Chrome is doing.
It's supposed to look like this:
Hello worldddd
link(s)
I tried to use the different word-wrap and word-break attribute but it doesn't fix it. If I use white-space: nowrap, the word doesn't go to the next line. I don't want to force the word to go to the next line for all browsers.
Do you know what I can do to fix this IE issue?

Let's say you have a text like this:
<p>this is a longer <span class="nowrap">test(s)</span></p>
Then all you need to do is apply following CSS:
p {
word-break: break-word;
}
#media all and (-ms-high-contrast:none)
{
/*target IE10*/
.nowrap {
white-space: pre;
}
/*target IE11*/
*::-ms-backdrop, .nowrap {
white-space: pre;
}
}
working jsfiddle - you can resize HTML input area to see the difference

Link text larger than parent

I have a div, and inside that div is a link
<div class="something">
Databases
</div>
The problem is that when I set the width of my div, smaller then the width that the text of the link is. the text of the link just goes outside of the parent div.
What I want is that the text breaks to a new line.
How can I fix this ?

Use the CSS word-break rule.
a {
word-break:break-all;
}
jsFiddle example

Try this
a{
white-space: pre-wrap;
word-wrap: break-word;
}
JsFiddle Demo

You should use the word-break property on the anchor <a> tag.
a{
word-break: break-all;
}
As this documentation explains, this will work since
In addition to ‘normal’ soft wrap opportunities, lines may break between any two letters (except where forbidden by the ‘line-break’ property). Hyphenation is not applied.
This will force the word to split whenever the text reaches the boundary of the container, breaking onto a new line.

You can use CSS to tell the browser to break the word down as it would multiple words:
.something{word-wrap: break-word;}

.something a {
/* see http://stackoverflow.com/a/7256972/315935 for details */
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
overflow: hidden;
height: auto !important;
vertical-align: middle;
}