I tried adjusting the width in several places of my CSS, but the text keeps on flowing on one line and doesn't wrap within a "leftsidebar". There seems to be no limit as to how far my text goes to the right, and I want there to be a limit. How do I set that in CSS?
<h3> JKHJKHJKHKJHJKHJKHJKHKJHJKHJKHKJH</h3>
#leftsidebar {
position:fixed;
width: 160px;
top:150px;
margin:0px;
line-height:165%;
white-space:nowrap;
z-index:50;
padding: 0px 35px;
}
http://jsfiddle.net/4uxcN/
Remove white-space:nowrap; (and eventually add word-wrap: break-word; to respect your div boundaries with your no-spaced long word) to send the text to new lines;
add overflow-x: scroll; if you instead want the text in one single line but want to have an horizontal scrollbar inside your fixed width div: http://jsfiddle.net/4uxcN/10/
If you're talking about word-wrap: break-word property it will break the word when it reaches the end of the parent width.
Remove {white-space:nowrap;}, which forces your text to one line and add {word-wrap: break-word} to deal with your very long word.
http://jsfiddle.net/4uxcN/6/
#leftsidebar {
word-wrap: break-word;
}
Basically, there are 3 ways you can do it:
Just remove your white-space property. LINK
Remove white-space property, and add word-wrap: break-word; property. LINK
Set you white-space to pre-wrap instead of nowrap. LINK
If you remove
white-space:nowrap;
All text will break at the spaces to fit within the box width.
Super long strings like the one in you example will not break. To force stupid long strings to break you can use.
word-wrap:break-word;
also you could use an overflow property Like
overflow:scroll
It just really depends on the layout you are going for
Related
In the demo below, I am trying to wrap text in small container (narrow browser width) and break the words with a hyphen.
There is a 5px padding but the right padding seems to be off screen along with some of the text.
DEMO:
https://jsbin.com/lajesilefi/edit?html,css,output
You have the propery word-break in there twice. Remove the second line
word-break:break-all;
word-break:break-word; <-- remove that line
Also as Germano Plebani suggests, remove those lines:
min-width: 100%;
width: 100%;
max-width: 100%;
Then it should work fine.
In addition to that I would suggest to use a margin instead of a padding in your #notification .ra-content block, so the last bit of the text does not disappear
https://jsbin.com/nudixewibu/1/edit?html,css,output
There's a billion of tutorials, but none have worked for me unfortunately.
I need some artistnames to be in the header, centered, but with a css ellipsis, so very long names gets the "..." and will be truncated.
You can see the design here: http://www.cphrecmedia.dk/musikdk/mobile/artistchannel.php
Remember to resize your browser window.
Its meant for mobiles, so I cannot have any fixed withs and it should work with all kinds of mobile screensizes. I can make the ellipsis work, but then the text is no longer centered.
Any clue on how to do this best? I would really like to avoid any javascript as performance is highly important.
You need to update the rules for h1 with overflow & text-overflow.
.header h1, .headerwhite h1 {
font-size: 15px;
line-height: 49px;
text-overflow: ellipsis;/* generates dots if text on one single line and truncated */
overflow: hidden;/* triggers text-oveflow and mids floatting elements */
white-space: nowrap;/* keep text on a single line to trigger text-overflow; */
display: block;/* reset to basic behavior of h1 , else inline-block drops down if not enough room */
}
basicly same answer as dartanian300 :)
You may control the max-width of h1 too and add a margin:auto; : demo
UPDATE
Using display: inline-block simply removes the h1 altogether on smaller screens. You should avoid this.
Also, technically, the text is still centered. It takes into account the ellipsis when centering the text.
ORIGINAL ANSWER
In order for the ellipsis styling to work, you've got to set a few things on the element with the text:
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block ensures that the box you're trying to generate ellipsis on is shown as a block. If it's not, it won't know where the bounding box is.
text-overflow: ellipsis obviously should generate the ellipsis.
overflow: hidden for some reason, browsers won't generate the ellipsis unless you have this. I believe it has to do with the fact that the text will just flow outside the box with it.
white-space: nowrap this prevents your text from wrapping onto multiple lines. That way, you have one line with ellipsis at the end.
That work?
How to prevent space and hyphen change line and make line break withspecific width ?
I know if I change the dash to ‑ and space   it works. but is there any other way to do it without change the content from db.
I also tried white-space:no-wrap; but the text will not break line with the specific width .
http://jsfiddle.net/eD4Ht/
<div>textfromdb-textfromdbtextfromdbtextfromdb- textfromdbtextfromdbtextfromdb textfromdb</div>
div{
width:100px;
background-color:red;
word-wrap:break-word;
}
It seems that you want the string in the div element to be rendered within the given width so that line breaks are entered only when the width limit is reached. For this purpose, word-wrap: break-word is not suitable, as it just allows browsers to break “words” arbitrarily when normal wrapping is not enough. You wish to replace normal wrapping by simple, mechanical fitting. For this, use word-break instead:
div {
width: 100px;
background-color: red;
word-break: break-all;
}
I'm using Bootstrap and I have a table with a few columns, the last of which sometimes has a long piece of text without spaces. I noticed that under certain screen sizes, the table would overflow its parent div and create ugly overlapping with its sibling table.
I played around with it and I think the problem has to do with the text being unspaced. I created a jsfiddle that demonstrates what I mean.
As you can see, the top leftmost table is well behaved and simply grows vertically to accommodate more text. However, the bottom left table leads to an overflow on the right due to the long unspaced text and the right column of the bottom left table winds up "under" its sibling.
Does anyone have any tips on how I can fix this so that the very long text gets clipped or partially split onto a new line?
.the-table {
table-layout: fixed;
word-wrap: break-word;
}
Deprecated (i.e. word-wrap)
Add the following styles to your <table>
.the-table {
table-layout: fixed;
over-flow: break-word;
}
Then you can adjust your layout via-CSS as you wish.
This works without forcing table layout to be fixed
Just add it to td or any
.is-breakable {
word-break: break-word;
}
I was having trouble with these solutions working in Internet Explorer.
I used the following style to get it to finally work.
<td style="word-break: break-all">
You can use below css. This will wrap the text and apply ... in the end of the text.
e.g. This_is_a_large_text will be changed to This_is_a_lar...
td {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
You can also add tool tip to show the complete text value.
<td data-toggle="tooltip" title="${text}">${text}</td>
Albers answer did the trick for me
.the-table {
table-layout: fixed;
word-wrap: break-word;
}
In the JS to load it dynamically add
$("#" + tableName ).addClass('the-table');
Hope it helps!!
Inline elements are great, because their width is the width of the content and because it's possible to center them with on rule of CSS:
text-align: center
But inline elements stay on the same line. Is it possible to align them vertically?
Fiddle: http://jsfiddle.net/_bop/NhVaF/
Full screen fiddle: http://jsfiddle.net/_bop/NhVaF/show
Please don't:
Change the HTML in the example. Change the CSS!
Come up with other techniques to center elements, unless you have a better solution that works on elements with unspecified width and doesn't need tons of containers and/or float hacks.
Thanks in advance!
In your markup, if the span are on different rows you could add on the parent container:
white-space: pre-line;
With this CSS declaration, your span are still centered, and you don`t have to add HTML markup.
pre-line
- This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever
necessary to fill line boxes, and at new lines in the markup (or at
occurrences of "\a" in generated content). In other words, it’s like
normal except that it’ll honor explicit line breaks.
You can find more informations here about white-space:
http://reference.sitepoint.com/css/white-space
http://www.w3.org/TR/css3-text/#white-space
For an IE7 compatibility, you could also add on the parent container:
*white-space: pre /*FixIE7*/;
You need some holding block to hold your spans if you want to display it on top of another. This is the best I can do.
http://jsfiddle.net/NhVaF/5/
If you want to make it work without altering the html, then your best bet is to simply float: left; clear: left; like so:
span {
float: left;
clear: left;
color: #FFF;
padding: 30px;
}
display: block; will not work because it requires you to set a width (or else they'll fill the available space).
display: inline-block; will not work because still display on the same line.
I was just playing around with this too, and found my solution by simply placing <br> after each inline-block element. I know it's altering the html but only slightly!
If you want to create line breaks with CSS try using the :after pseudo class. Would something like this work?
div.class:after {
content:"\a";
white-space: pre;
}
break :after trick: https://stackoverflow.com/a/10934138/6586407