I have a simple two-word header, from which I would like to remove or hide the last word, instead of wrapping it to the next line, when there is not enough room in the window for both words.
<h1>First Last</h1>
I know that there are no first-word selectors for css, so that's not an option. I could hide the overflow, but I want the last word to disappear all at once, not letter by letter. And of course, white-space:nowrap; comes to mind, but that doesn't remove the word.
Is there a way to do this with css? Preferably without fixed heights or widths?
http://jsfiddle.net/pnaL4/2/
There is no possibility to select a last word from a tag. The only possibility I could think of was to use a media query that loads this custom CSS when the line size is too small:
h1 {
visibility: hidden;
}
h1:before {
visibility: visible;
content: "First";
}
Of course, this would require you to specify the showed content.
Simple. Use a white-space:nowrap; CSS Property.
h1 {
white-space: nowrap;
}
This will ensure that even if the window resizes, the text will not wrap down and get hidden as the window shrinks.
Here is the WORKING DEMO to illustrate the issue.
I ususally do something like
h1 {
font-size: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 745px;
}
ellipsis outputs ... to show there is more text to come, if you don't want anything at all I would do
text-overflow: inherit;
another good tip if you are cutting of text is to add a title attribute to the h1 so that the user can see the full word on hover.
eg
<h1 title="First Last">First Last</h1>
If you let the overflowing word(s) break to the next line, you can use an overflow with a height instead of width to create that effect:
h1 {
height: 30px;
overflow: hidden;
}
Example
Related
This is the example:
<style>
div {
background-color: skyblue;
height: 100px;
}
.posttext {
word-wrap: break-word;
-ms-hyphenate-limit-lines: 10;
text-overflow: ellipsis;
}
</style>
<div>
<p class="posttext">---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8--------</p>
</div>
When you decrease the width of your browser enough the text will continue to show under the blue colored div. I found a way to stop it using 'text-overflow: ellipsis' but it stops at the first line.
Is it possible to make it continue until it reaches the height of the div and then show three dots at the end rather than continuing under it?
Below properties are useful when you want to show ellipsis at the end of single line.
div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Since you are looking for multi line ellipsis (which is not directly available in CSS), I think below link might help you :
https://codepen.io/martinwolf/pen/qlFdp
There is also one Jquery plugin available which can be used :
https://tpgblog.com/threedots/
I currently have an ordered list like this one where the numbers and items are centered and left aligned:
I achieved this using this css:
ol
{
padding-left:1em;
padding-right:1em;
display: inline-block;
text-align: left;
word-break: break-word !important;
/*white-space: nowrap*/
}
The problem I am seeing is that it wraps text strangely - it will wrap list items (create a new line) if they are a certain amount longer than the other list items. This creates things like in the picture above (or in text format):
1.Sleeping
Bags
2.Tent
3.Food
4.Stove
5.Jackets
6.Bug Spray
Notice how the Bags is on a new line, but that is not where the div ends. I tried using white-space: nowrap, but obviously that does what it says and long text then continues beyond the div without breaking.
Also, it may just be some sort of browser glitch because sometimes when I hit back and the page is cached it will load correctly, and in safari instead of chrome it seems to work correctly without white-space: nowrap.
Any help / ideas appreciated, or if it is just some weird unfixable thing, I am sorry
You can try Below code:
working demo
div{text-align:center;}
ol
{
padding-left:1em;
padding-right:1em;
display: inline-block;
text-align: left;
word-break: break-word !important;
/*white-space: nowrap*/
}
Give the list a (bigger) width:
ol {
width: 200px;
... rest of CSS
}
As for debugging, I often add a border: 1px solid red; so you can see how far the element extends. If you add it to the ol you'll see that it's width causes the line break. So making it bigger should do the trick.
I have a paragraph with alot of text inside but this text is showing all in one line. How can I format this text so it will not mess up my site and not show it in a single line?
Thanks in advance for your help!
Edit:
This is my code:
<div class="catDescription">
<?php echo $this->category->description; ?>
</div>
You can check here what my issue is:
http://complusoft.net/demo-ventus/index.php?option=com_k2&view=itemlist&layout=category&task=category&id=29&Itemid=334
This is because you have only 1 word.
Add word-wrap: break-word;
Like
.catDescription p {
width: 300px;
white-space: normal;
word-wrap: break-word;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
If you set a width for the paragraph then the text should wrap by default, unless specified otherwise, when the width of the paragraph is exceeded.
p {
width: 300px;
white-space: normal;
}
You have a non spaced string, inorder to break that, you will have to assign some fixed width to your paragraph and than use word-wrap property with a value of break-word
Demo
There are different ways to achieve this.
You could use some <br> tags, but looking at your code, I don't think it could be useful.
That's why I'm suggesting you to format your text better. You could style your <div> and your <p> to get a good-looking text. First of all, set a max-width to your div: this way, if a user shrinks the window, or has a very low resolution, your layout is preserved.
.catDescription {
max-width: 1024px; /*Width example, you can ofc change it*/
}
If you have walls of text, line-height property can help you not getting your text too tightened. For example:
.catDescription p {
line-height:130%;
}
Use line breaks: <br>. Insert wherever you want a newline to occur.
I have two floated divs, side by side, with p tags inside. The text within the p tags does not wrap and just overflows the container, as you can see in the text under the images:
My HTML looks like so:
<div class="submenu">
<h3>Destinations in Europe</h3>
<ul>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
</ul>
<h3>Features</h3>
<div>
<img src="/assets/images/o/menu/city-feat-one.jpg" />
<h4>blahblah</h4>
<p>
khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
</p>
</div>
<div>
<img src="/assets/images/o/menu/city-feat-two.jpg" />
<h4>blahblah</h4>
<p>
khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
</p>
</div>
</div>
My CSS:
#rb-menu-com li .submenu > div {
width:48%;
float:left;
position: relative;
}
#rb-menu-com li .submenu div p {
color:#fff;
margin: 0;
padding:0;
width:100%;
position: relative;
}
#rb-menu-com li .submenu div img {
border:1px solid #fff;
}
Has anyone experienced this before? I haven't!! Driving me mad!
Give this style to the <p> tag.
p {
word-break: break-all;
white-space: normal;
}
Word wrapping only occurs when there is a word break.
If you have a "word" that is as long as that, then there is no place for it to break.
The proper solution is to write real content and not nonsense strings of characters. If you are using user generated content, then add a check for exceptionally long words and disallow them (or cut out part of them for URLs while keeping the whole thing in a link).
Alternatively, you can use the word-break CSS property to tell the browser to line break in the middle of words.
p { word-break: break-all }
(Note browser support).
Alternatively, you can use overflow to truncate the text if it won't fit in the container.
To anyone still struggling, be sure to check and see if you've set a line-height value on the font in question: it could be overriding the word wrap.
That is because you have continuous text, means single long word without space. To break it add word-break: break-all;
.submenu div p {
color:#fff;
margin: 0;
padding:0;
width:100%;
position: relative;
word-break: break-all;
background:red;
}
DEMO
This is not an answer to the question but as I found this page while looking to an answer to a problem that I had, I want to mention the solution that I found as it cost me a lot of time. In the hope this will be useful to others:
The problem was that text in a <p> tag would not fold in the div. Eventually, I opened the inspector and noticed a 'no breaking space entity' between all the words. My editor, vi, was just showing normal blank spaces (some invisible chr, I don't know what) but I had copied pasted the text from a PDF document. The solution was to copy a blank space from within vi and replace it with a blank space. ie.
:%s/ / /g where the blank to be replaced was copied from the offending text. Problem solved.
This is a little late for this question but others might benefit.
I had a similar problem but had an added requirement for the text to correctly wrap in all device sizes. So in my case this worked. Need to setup the view port.
.p
{
white-space: normal;
overflow-wrap: break-word;
width: 96vw;
}
You can use word-wrap to break words or a continuous string of characters if it doesn't fit on a line in a container.
word-wrap: break-word;
this will keep breaking lines at appropriate break points unless a single string of characters doesn't fit on a line, in that case it will break.
JSFiddle
The solutions is in fact
p{
white-space:normal;
}
You can change the break behaviors by modifying, word-break property
p{
word-break: break-all; // will break at end of line
}
break-all: Will break the string at the very end, breaking at the last word
word-break: is more of pretty brake, will break nicely for example at ? point
normal: same as word-break
If the desired result is to break the line by complete word use:
p { word-break: break-word; }
else you can use:
p { word-break: break-all; }
EASY
p{
word-wrap: break-word;
}
Adding width: 100%; to the offending p element solved the problem for me. I don't know why it works.
For others that find themselves here, the css I was looking for was
overflow-wrap: break-word;
Which will only break a word if it needs to (the length of the single word is greater than the width of the p), unlike word-break: break-all which can break the last word of every line.
overflow-wrap demo
add float: left property to the image.
#rb-menu-com li .submenu div img {
border:1px solid #fff;
float:left;
}
I have the following structure:
<ul>
<li>
<p style="width:10px;">
Text goes here
</p>
</li>
<li>
<p style="width:10px;">
Text goes here
</p>
</li>
</ul>
When the text of the p exceeds the 10px limit I would like it to continue in a new row.. How do i do that? Thanks
Your example already word-wraps (because<p> is already a block element), if you want to break words, then you could try:
p.letters {
word-wrap: break-word;
}
Here's a basic working example: http://jsfiddle.net/G9z5M/ (see updates below).
You can play around with it using various techniques:
/* Wraps normally, on whitespace */
p.words {
word-wrap: normal;
}
/* Hides non-wrapped letters */
p.hidden {
overflow: hidden;
}
/* Outputs a single line, doesn't wrap at all */
p.nowrap {
white-space: nowrap;
}
See updated fiddle: http://jsfiddle.net/G9z5M/1/
For me it worked
white-space: initial;
May be it helps to someone else.
Normaly p elements are block so the width is respected, and it should wrap at 10 pixels.
See http://jsfiddle.net/ejLmu/
If it does not work for you it means that you have some css rules that override the default settings. You either have set display:inline (in which case the width is not respected), or a white-space:nowrap; (which disables the text-wrapping).
I am not sur I do understand your question but with CSS you shoudl try :
word-break: break-all; // normal; // keep-all;
And if you want to hide extra content :
overflow: hidden;
You should use
style="width:10px; display: block;"