This is my website's main menu:
As you you'll notice, the text inside main menu's items isn't wrapping. I've tried many solutions suggested but nothing seems to affect these items. Here's the css code:
#pt_custommenu .parentMenu a{
width: 100px; height: 59px;
line-height: normal;
padding-top: 0; padding-bottom:0;
float:left;
display: inline-block;
position: relative;
text-transform: none;
word-wrap: normal;
white-space: normal !important;
}
I'd like to make text break into two lines, like it would normally do, since the <a> element has a standard width and height.
Any suggestions?
Remove
This code inserts a space without wrap. Normal spaces don't do that.
You can retrieve more info about here:
http://www.sightspecific.com/~mosh/www_faq/nbsp.html
EDIT: I'm going to copy the relevant info in case this link someday dissappears:
is the entity used to represent a non-breaking space. It is
essentially a standard space, the primary difference being that a
browser should not break (or wrap) a line of text at the point that
this occupies.
Many WYSIWYG HTML editors insert these entities in an effort to
control the layout of the HTML document. For example, such an editor
may use a series of non-breaking spaces to indent a paragraph like
this:
<p>
This first line of text is supposed to be indented. However, many browsers will not render it as intended.
</p>
[...]
There are some times when it is "acceptable" or "advisable" to use the
entity so long as the consequences are understood:
Its intended use of creating a space between words or elements that
should not be broken. The only problems that can be associated with
this use is that too many words strung together with non-breaking
spaces may require some graphical browsers to show horizontal
scrollbars or cause them to display the text overlapping table
borders.
You want text to be broken so use following:
word-wrap: break-word;
I checked again and saw you didn't use any spaces, thats why it can't. Replace with normal space character. Otherwise browser will read it as a block without spaces.
Related
I'm learning CSS3 and while going through a layout, I noticed that when I try to add design to multiple sections and also classes/IDs, sometimes I have to have space between the section name and class/ID and sometimes I don't. Please see below, specially the ones in bold.
When I eliminate space and give space in the wrong place, the code doesn't work.
I want to know why this happens, how do I know when to give space or put them together?
Thanks!
#media(max-width:768px){
**header #branding,**
header nav,
header nav li,
**#newsletter h1**,
#newsletter form,
#boxes .box,
**article#main-col**,
**aside#sidebar**{
float: none;
text-align: center;
width: 100%;
}
Spaces are allowed anywhere. Multiple spaces are also allowed.
Combining things on one line is also no problem. But a word (selector, property or value) may not be broken. text- align (broken with space) is NOT allowed.
article#main-col (without space) selects the <article id="main-col">
article #main-col (with space) selects an <... id="main-col"> inside the <article>
I need help with a bit of CSS I'm trying to use. I'm testing with Chrome, but I need a solution that's not browser-specific.
I have a page divided into two iframes: a narrow one on the left that contains a table of contents, and a wide one on the right that displays a selected page. I want to display the URL of the selected page at the bottom of the left-hand frame. If it's too long to fit in the frame (as it usually is), it should wrap to a second line, and the first line should move up so that the last line remains bottom-aligned.
The structure of the page in the table of contents iframe looks like this:
<body>
<div>
<script...> <!--JavaScript that generates the table of contents--> </script>
</div>
<div id='showPageUrl' style="height:auto;position:absolute;bottom:0"></div>
<script...> showURL(document.URL) </script>
</body>
The following function is executed by the JavaScript code that loads pages (from an onclick event), and also by HTML that loads the initial page (above).
function showUrl(url) {
var sel = document.getElementById('showPageUrl');
if (sel!==null) {
sel.innerHTML = url;
}
}
The problem: if the URL is too long to fit on one line it doesn't wrap, because it contains no whitespace characters to wrap at. Instead the frame sprouts a horizontal scroll bar. If I replace the URL with a piece of text that contains whitespace, the text breaks at a whitespace character and displays properly.
I've looked for a CSS property to make the URL break wherever it has to, but I can't find anything. All the line break controls seem to assume there's whitespace and change how the rendering engine treats it.
What must I do to make a URL (with no whitespace) break properly at the end of a line?
You're looking for the overflow-wrap CSS property (legacy word-wrap):
.example {
word-wrap: break-word;
overflow-wrap: break-word;
}
Documentation: http://www.w3.org/TR/css3-text/#overflow-wrap
Browser support: http://caniuse.com/#search=overflow-wrap
DEMO: http://jsfiddle.net/aueL3/2/
#showPageUrl { word-break: break-all; }
For reference: http://www.w3schools.com/cssref/css3_pr_word-break.asp
This is not really a CSS issue. To specify allowed direct break points, you can use the <wbr> tag or the zero-width space character . You need to decide on the principles of breaking; there are various standards and practices on where a URL can be broken.
Primarily, don’t put URLs into textual content. They should appear in attributes, like href.
You can use this CSS to break the URL anywhere that is going to exceed the parent's width.
Here is the CSS:
.text {
position: absolute;
display: block;
width: 100%;
bottom: 0;
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
white-space and word-wrap code taken from How do I wrap text with no whitespace inside a <td>?
Finally, a JSFiddle: Demo
Related Question: SO Question
zero-width space character is perfect for text, but urls are likely to be copied, and when pasted the space will be right there to break them. Since it is invisible, people won't understand what's wrong and will think the url is not working. Since support for wbr is not universal, for a similar issue I split the url in two spans marked with display:inline-block. They split just like an invisible space and don't mess copy & paste (is important to avoid spaces or newlines between them in the html or a space will be visible).
<span style="display:inline-block">firstpartoflongurl</span><span style="display:inline-block">seconfpartofit</span>
*I know this is too old to be useful to the original author, but may help others looking for the same thing
Try to use the following line to insert new line by replacing white spaces using css.
white-space: "pre-line"
I have a long chunk of text which is a file path within a td that causes the whole thing to be 600+pixels wide, when I want to be fit within 200 px.
I can enable word-break:break-all and have it display the whole thing breaking between characters but then it cuts the folder names in half.
So, ideally I'd like to break the lines only upon '/' or '\' characters. Is that possible?
Thank you!
No, you can’t; there is no CSS construct for such purposes at present.
What you can do to suggest allowed line break points is to use a <wbr> tag or a zero-width space after each “/” or “\”. You could do this dynamically with JavaScript, traversing the relevant text nodes.
I don't think you can do this with CSS alone. But here is a way to do it using JQuery:
function (yourObject) {
yourObject.html(yourObject.html()
.replace(///g, '<br>')
.replace(/\/g, '<br>'));
}
This is assuming that your object doesn't contain html within it. If it does, it would replace the slashes, so you would need to check for a > following the slash.
A better solution might be to wrap the long text in a container element that allows scrolling, like StackOverflow does with code blocks:
.longtext {
width: 100%;
display: block;
word-break: none;
overflow: auto;
background: #eee;
}
http://jsfiddle.net/mblase75/NCNSa/
In GWT, one can create a custom logging area by installing a HasWidgetsLogHandler. In my case, that is a VerticalPanel. Unfortunately, the rest of the page is distorted by the logging output, which is too wide. How can I wrap the lines?
HasWidgetsLogHandler adds an HTML element for each log entry. I tried styling the individual elements in UiBinder, but that did not work:
<ui:style>
#external gwt-HTML;
.gwt-HTML {
white-space: normal;
}
</ui:style>
Similarly, adding overflow: hidden—which would have been a less attractive option—had no effect.
Thank you for any pointers.
A VerticalPanel is implemented as an HTML table. While you can use it, I would usually recommend a FlowPanel instead.
On a FlowPanel, you can set the following properties:
white-space: normal;
word-wrap: break-word;
word-wrap is CSS3, but is supported by many browsers: http://caniuse.com/wordwrap. It allows long words to be wrapped after every character. For browsers that don't support it, you may want to add overflow: hidden. (Or consider setting a fixed width together with overflow: auto.)
If you absolutely need to use a VerticalPanel, see Word-wrap in an HTML table (you have to set the word-wrap on the <td> then).
I'm hoping this is simple. I'm not a CSS guy.
I'm trying to make some code look a little better on a blog and I have the following <code> CSS style.
code {
display: block;
white-space:normal;
background-color: #eeeeee;
font: 1em, 'Courier New', Courier, Fixed;
padding: 7px;
margin: 7px 7px 7px 7px;
}
This is working fine for me, except where there are line breaks in the code contained in my <code> tag, the background color is white not light gray.
Is there a CSS tweak I can make to force my entire <code> block have a background color of gray?
Thanks.
Comment: If I put a space on the empty line, I get what I want - a gray background on that line.
Comment2: I have only plain text inside of my <code> </code> tags. Ideally I don't want to mark up my code w/ tags. Just cut and paste inside of the <code> tags and have it look decent.
Final Comment: After reading this as suggested by mercator below, I finally went with this. I subclassed the <pre> tag and got want I needed. A nicely shaded boxes to offset my example code blocks.
pre.code {
color: black;
border: solid 1px #eeeeee;
font-size: 1.1 em;
margin: 7px;
padding: 7px;
background: #eeeeee
}
It appears to work fine for me, but then I don't know what the contents of your <code> tags are.
There's a few oddities in your CSS in any case:
I probably wouldn't use display: block, but wrap the tags in a <p> or <pre> instead. Changing it to a block like that still won't allow you to nest block-level tags inside it, and it would still need to be inside a block-level tag itself. CSS doesn't change the HTML syntax and semantics. Do you have any block-level tags within your code tags?
Why did you set white-space: normal? That's a little unusual for a code block. How exactly are you formatting your code? Are you adding <p> or <br> tags in there? Why don't you use white-space: pre, or perhaps white-space: pre-wrap?
Your font declaration is broken. There shouldn't be a comma between the 1em and the font names. Browsers would now simply parse that as if 1em is the name of a font family, I think, and then fall back on Courier New, since 1em doesn't exist.
I think you meant to say monospace instead of Fixed. Or is Fixed the actual name of a font face? You'd better add the generic monospace anyway.
More of a nitpick: you can collapse those 4 margins down to one value too.
I'm not sure if any of these are really the cause of your problems. The first two are the most likely candidates. Nothing strange happened on the quick tests I did, but some of your other CSS might be creating the problems in combination with some of these points.
Ah, wait a minute... I see now that you're talking about making "some code look a little better on a blog". The blog software is automatically adding paragraph tags around blocks of text separated by blank lines. Those are responsible for the white.
I suppose that's also why you added white-space: normal. The blog software is already adding line breaks and everything automatically (with <p> and <br> tags), so using pre added a whole bunch of extra space.
Try using the <pre><code> tags combination like StackOverflow does. Using the <pre> tag will probably (hopefully) prevent the blog software from messing with your code.
For WordPress, have a look at their article "Writing Code in Your Posts."
Try setting an explicit width. Not sure why that would work. I sometimes add a border while testing to see where my box is and what it looks like. I know you can do that with web debuggers like firebug, sometimes it's simpler and might even have side effects.
add:
width: 100%;
border: 1px solid #eee;
See if that helps, maybe change the border color to #000 to see where the boundaries are.
Without some HTML and/or a test page, it's quite difficult to know what could be causing the problem. I would look at the line-height property though - it often causes these kind of problems.