I have a css class on a textarea like this..
.expanderHTMLText{
font: 12px Arial, Helvetica;
min-height: 50px;
white-space:nowrap;
}
I do not want words to break in between long words, but I do want the text to fill the box not be all on 1 line with a scroll bar. I want to get rid of the horizontal scroll but not have to break the words to do it. How do I accomplish this?
Remove white-space:nowrap; line and it will not be on one line.
Edit:
Who down-voted me? Please give me an explanation for that.
white-space: nowrap; explicitly defines, that wrapping will not occur. The only way how text can be wrapped is by removing or changing this property.
Default value for white-space property is normal, which acts almost identically to nowrap except it will wrap the text (collapse spaces).
If you do not want to words (even long ones) to be split on multiple lines, you will need to add word-wrap: normal; as JSW189 suggested.
But then you would still get a horizontal scrollbar if you would have a word which does not fit on one line - but thats obvious, you will either have word on multiple lines, either scrollbar.
Related
How do I make element visible only inside letters and not around them?
I want to position absolutely an element over some text and only make the element visible inside letters.
Is there something like "overflow: hidden" for the text?
Text to set overflow : hidden on
#Edit: Maybe I did not express myself well enough, I want to put some div or image etc. over some text and make it so the div/image, only shows trough letters as if they were holes cut in the foreground element, but I also want to keep text color when there is nothing "covering" it;
I don't understand what you want but there is the text-flow, that can help you.: text-flow
Look at this code, can help as well :
width: 200px; //define a fixed width
white-space: nowrap; //it's like flex-wrap: nowrap, avoid the line breaks
overflow: auto; //or hidden in your case
I'm fairly new to coding and I just can't figure out to make the text in one row of a column to wrap. Right now they overflow into the next column. The table is responsive, but this one line refuses to cooperate. I do not have access to the html so it has to be fixed with just css.
I've tried overflow, text-overflow, white-space, overflow-wrap, nothing works!
I know I'm targeting the right div and class since i'm able to make that exact text red, but when I try to make the words wrap, in Chrome Dev Tools, it automatically gets a strikethrough.
What am I doing wrong?
#IDX-showcaseGallery-3643.IDX-showcaseTable .IDX-showcaseCityStateZip span.IDX-showcaseAddressElement {
overflow-wrap: break-word !important;
color: red;
}
This is how it looks like:
The website is newtraditionrealty.com .
Thanks for an advice!
This rule is preventing your white space from wrapping:
.IDX-showcaseCityStateZip span {
white-space: pre;
}
Removing it allows the text to wrap again.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
On my website all of the text between the apostrophes (the words "what's" and "journalist's") have larger spacing than the rest of the text. http://heiditaylorlaw.com/about_me.html Why is this? I tried using the word-spacing tag in CSS with no luck.
The problem is text-align: justify;. According to w3schools:
justify Stretches the lines so that each line has equal width (like in
newspapers and magazines)
However, you can use text-align:left; instead of text-align: justify;.
Here's the live site: http://chadfraser.com/
As you can see, if you look on mobile or scale your browser window, the words break in strange places. I could add hyphens, except my client is a professional writer and doesn't want them. We shouldn't need them though - I can't figure out why the words won't just wrap with the white space.
Any thoughts would be appreciated.
Its because your code is assigning word-wrap: break-word; It causes the word to break in half if necessary.
Most precisely, it is been set in styles.css on line 51:
body {
word-wrap: break-word;
...
So, your entire document will behave like this. Set the property to word-wrap: normal on the elements you don't want to break, or just remove this property from the body
I have the following style already: white-space: pre-wrap;
This allows newlines to be treated as newlines (and spaces don't get collapsed) for the element.
Now I want to apply text-indent: -40px; padding-left: 40px; in an attempt to produce something like this:
This is a long line of text (or at least, just pretend it is) so it
will indent when it wraps.
Further lines of text appear as normal, but again if they exceed the
maximum width then they wrap and indent.
Unfortunately, it's not doing quite what I intended:
This is a long line of text (or at least, just pretend it is) so it
will indent when it wraps.
Further lines of text appear as normal, but again if they
exceed the maximum width then they wrap and indent.
Is there a way in CSS to indent wrapped lines, but counting newlines as a new first line?
No, because text-indent relates to the first line of an element, and newlines generated by line wrapping do not create elements. So instead of just newlines in HTML source, you need to use some content markup.