This question already has answers here:
Break long word with CSS
(6 answers)
Closed 3 years ago.
I am using an editor on my page and the word wrapping works fine if they are actually words. Meaning there is a space after every few characters.
However, if I put my finger on a letter and keep pressing, then the editor will expand beyond the edge of the display.
So I believe the following does the word wrapping showing an scrollbar if necessary:
<div style="overflow:scroll;">
But that won't work for the above scenario. Do I need a different attribute?
What am I doing wrong? Thank you.
I believe what you are looking for is the word-wrap attribute, specifically break-word, which allows a long word to be broken into sections to allow for wrapping. Try the following:
div {
overflow-wrap: break-word; // standard
word-wrap: break-word; // older, but still needed in IE
}
<div>
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
You may also find some helpful information in this post and this post.
Related
This question already has answers here:
What is the box-sizing property for in CSS?
(4 answers)
Closed 3 years ago.
I am actually seeking A really simple and short answer, my discord friends kept telling me that I should write it every time I start programming a website and so on I did without actually knowing what it really does and Impacts.
box-sizing:border-box; defines how the elements are calculated i.e. height and width & do they really need padding and borders, these properties are taken care of box-sizing:border-box;. With box-sizing: border-box;, we can change the box model to an unusual way, where an element's specified width and height do not get affected by padding or borders. This has become so useful which helps in a responsive design that it's found its way into reset styles. You can find this list of browsers which supports box-sizing:border-box;
This question already has answers here:
Making a piece of text non-breaking?
(3 answers)
Closed 5 years ago.
I have strings containing smileys using ascii characters such as :-) which I need to display on a web page.
It happens than when the smiley is just at the end of the line it might be split between two lines. I don't want this to happen. I always want the smiley to be displayed as a singular "word" (in that case, the whole smiley would be displayed on the second line).
Could someone please suggest a solution?
EDIT 1 & 2
As I mentioned in the comment, the idea here is that a collection of punctuation marks is NOT necessarily considered like a word... And that's actually the problem I was facing. So if I had "comment" at the end of my line, this word wouldn't be split but if you have ";.!,;:" then this would.
In addition the answer you point to do not suggest the solution word-break: keep-all which is the one I used. Thus I believe this complementary and different.
You actually probably want: word-wrap: break-word
You can try with white-space: nowrap
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Other alternatives like old nowrap for tables described here Attribute 'nowrap' is considered outdated. A newer construct is recommended. What is it?
A simple white-space: nowrap should do the work.
Just wrap your smiley in a span with a class : .nowrap and declare the property to that class.
This question already has answers here:
CSS text-overflow: ellipsis; not working?
(18 answers)
Closed 7 years ago.
I have a text that needs to be truncated in some defined length (say 14) and I want to add an ellipses to the end of the truncated text.
Example Output:
Some text here...
Can this be done in CSS?
Css dont know the number of characters. It only knows box model. In a project i had worked on elipses with css but it is worst idea.
For a better approach use javacript.
This question already has answers here:
Is it alright to use multiple h1 tags on the same page, but style them differently? [closed]
(15 answers)
Closed 8 years ago.
Here I am again, asking the same question I asked a few months ago. But no, I don't believe this is a duplicate, because there are so many contradicting answers on this that I find it difficult to determine the correct one.
seroundtable.com says,
H1 tags should be used for what they were originally created for: organizing your documents to stress the key points.
That being said, it would be illogical for search engines to not think that a h2 is of lesser importance than a h1.
ehow.com says this,
it is recommended that a page should always have an H1 element, but only one. The H1 tag should include the main keywords targeted within the page.
So that right there contradicts an answer provided to me on S/O a few months ago. The answer that was provided went along the lines of, 'You can have as many h1 tags as you like' (I was asking a question about how to use them when I need more than 6).
So now I am confused.
I believe that by using many h1's sends a less-than-clear message to the viewer and search engines. But I also feel dirty making a p tag 28px;
What should I do? The issue here is, this is a unique design, and all 5 main navigation links are spread horizontally and are all the same size. I want to use a h1 for them all, I do not want to use h1, h2, h3, because all links - in this case - are of equal value. What I mean is, you wouldn't dare try to pass one page off as less important than the other.
you can have as many h1 tags as you want in a page (w3c specs).
in your case however i would recommend using a list or for the navigation menu (wrapped in a nav element if you're using html5). The links to other pages aren't headings or the most important elements on your page.
you should reserve using h1-6 for actual headings.
You should look into using an HTML list. It seems like you are questioning what HTML element is most semantically correct, and from my experience the most semantically correct way to do navigation is using a list.
But other popular developers like Chris Coyer the author of CSS-TRICKs says he uses listless navigation. Navigation in lists to be or not to be.
If your site is going to used by lots of people, using a list will help those with disabilities and use screen readers to consume your website.
This question already has answers here:
How to word wrap text in HTML?
(20 answers)
Closed 7 years ago.
I have a fixed width div on my page that contains text. When I enter a long string of letters it overflows. I don't want to hide overflow I want to display the overflow on a new line, see below:
<div id="textbox" style="width:400px; height:200px;">
dfssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssfddddddddddddddddddddddsdffffffffffffffffsdffffffffffffffffdfssssssssssssdf
</div>
Is there anyway to disable overflow and put the overflowing text on a new line??? Twitter does something like this but I can't figure it out with CSS it's possible they are using Javascript.
Can anybody help with this??
Just add
white-space: initial;
to the text, a line text will come automatically in the next line.
word-wrap: break-word
But it's CSS3 - http://www.css3.com/css-word-wrap/.
Try the <wbr> tag - not as elegant as the word-wrap property that others suggested, but it's a working solution until all major browsers (read IE) implement CSS3.
Well, you can stick one or more "soft hyphens" () in your long unbroken strings. I doubt that old IE versions deal with that correctly, but what it's supposed to do is tell the browser about allowable word breaks that it can use if it has to.
Now, how exactly would you pick where to stuff those characters? That depends on the actual string and what it means, I guess.