![]() Note: I’m running in HTML 4.01 strict mode. At that point, I’ll know for sure how well this cleaner version of the code works. With text-overflow, ellipsis can be applied to a single line of text. I should have the work done on the pages this morning and begin final testing. This was a remarkably easy way to switch over my pre formatted text. I used the replace function of notepad to replace any double spaces with followed by a space. White-space:normal seems to get the wrapping started and standard html tags like and work best for adding white space to the text. In my case, I wanted normal wrapping behavior and preservation of formatting for the main text box on my web pages. Unfortunately, it only seems to work consistently well in IE8. I didn’t get at first that you found this desirable under some circumstances. ![]() Set the width and height of the container for that paragraph so that it should. Change the size, weight, and other font properties of the text. Word-wrap:break-word initiates normal wrapping in IE6 and IE7, has no effect in firefox, and breaks words in the middle in IE8. to Achieve the required changes you can use the text-overflow property in CSS. Bulma is a free, open source CSS framework based on Flexbox and built with Sass. The only thing that seems predictable so far is that white-space:normal initiates normal word wrapping in almost any browser. In fact the preformatting, attributes and tags in general seemed to be a little unpredictable. It was causing some odd display issues in Internet Explorer. width: 200px border: 1px solid 000000 overflow: hidden text-overflow: ellipsis. (Just wait a day two for me to do some editing if you are running IE8 or Safari.)įorget what I said previously about white-space:pre. Set the overflowed content for theelement to have ellipsis (.It can be clipped, display an ellipsis (.), or display a custom string. This isn’t a fancy way to go, but it should give predictable results across just about any browser.įeel free to check out my website. The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. The best solution, at the moment, seems to be white-space:pre to preserve text formatting, using fonts that everyone has (like Arial ) and manually hitting carriage returns where the line of text should end. Unfortunately all of the word wrapping options seem to give me problems in one browser or another. I used white-space:pre-wrap with Firefox successfully and white-space:pre seems to work on almost any browser. (Unfortunately, I just found out about those last problems yesterday when viewing my web page at a client’s house. Safari had similar result as Explorer 8, but I don’t know if word-wrap should be blamed. Ideally, we would add ellipsis, but we can’t reliably position them. But it can be a bit awkward to just cut the text off like that. My experience so far with word-wrap is that it has worked well with Internet Explorer 6 and 7, didn’t work at all with Firefox and broke the line of text in the middle of words in Explorer 8. If we want to expose three lines of text, we can just make the height of the container 3.6em (1.2em × 3).
0 Comments
Leave a Reply. |