Here is an example.
As you can see, I made the <button> element inline (in fact, doesn't matter if it's inline or inline-block).
The issue is that on some certain container width, the "." goes to the next line by itself, which is weird.
Without the button element, "here" and "." goes to the next line together, which is the desired behavior.
I don't want to place an explicit line break before "here". It should be responsive. Meaning, if the container is wide enough, everything should go in one line.
I also don't want to put the "." inside the button because it should not be colored.
How do I solve this?
You can wrap the button and period in a container with white-space: nowrap:
<p >This section means lorem ipsum dolor sit amet. You can see the permissions <span style="white-space: nowrap;"><button>here</button>.</span></p>
(Although I would always use a class rather than in-line style in practice).
If you place the button and the period inside a new container with display: inline-block, the browser will prefer to keep them on the same line. Wrapping will occur before or after the new container as long as it's possible.
The most correct element to use would be an <a> element - since you are expecting the user to click it and then go to that location and see the result.
Since <a>'s are already inline elements - this will not affect your layout. You can style the a to look any way you want - but this is not the job of a button. It is always best to use the right tool for the job.
p{
font-size: 14px;
font-family: arial;
}
a {
color:red;
text-decoration: none;
}
<div>
<p>This section means lorem ipsum dolor sit amet. You can see the permissions here.</p>
</div>
Use pseudo class instead of having the "." as part of text itself. Here is the code that works
From your example, remove the "." from the HTML and add the button:after in the css
HTML:
<div style="width:508px">
<p >This section means lorem ipsum dolor sit amet. You can see the permissions <button>
here</button></p>
</div>
CSS:
p{
font-size: 14px;
font-family: arial;
}
button {
border: 0;
padding: 0;
font-size: 14px;
height: auto;
display: inline;
color: red;
}
button::after{
content:'.';
color: black;
}
I'm trying to do a design for a short story site.
One of the stories I've been told would work better if someone copied and pasted text, extra lines would show up.
Is there anyway to achieve this with just HTML and CSS? I've tried using display: none; but that doesn't seem to copy the hidden text. I do not want to use Javascript for this
Example HTML
<div>Lorem ipsum <span class="inv"> ---- This is the cleverly hidden text ---- </span>dolor sit amet</div>
The closest I've come is
width: 1px;
overflow: hidden;
display: inline-block;
height: 1em;
color: rgba(255,255,255,0);
If I do width: 0; it doesn't copy. The way above still shifts the text a small amount, and when highlighted, does show a bit of an artifact.
(Unrelated to the question itself: But from what I understand, the intent is the story will strongly hint that when copied, hidden information shows up, which would lead to another unlisted story on the site for people who understand what its hinting at)
This is a possible solution to this problem, however it may or may not be appropriate.
Only appears after pasting
Potentially if you want it to only appear in the pasted text (rather than when it's highlighted) you could make the font take up no space, so it can be hidden between the other text e.g.
div {
color: #000;
background-color: #FFF;
}
.hidden{
font-size: 0;
}
<div>
This is visible.
<span class="hidden">This is not.</span>
(Copy and paste this to see the hidden line)
</div>
Visible while selected
If you would prefer the text to be visible simply by selecting it, you can either match the background colour set it to a transparent colour.
div {
color: #000;
background-color: #FFF;
}
.hidden1{
/* Match the background colour */
color: #FFF;
}
.hidden2{
/* Transparent text, should work on any background colour */
color: rgba(0,0,0,0);
}
<div>
This is visible.
<span class="hidden1">This is not.</span>
<span class="hidden2">Nor is this.</span>
</div>
This answer is just a demonstration of the solution discussed in the comments of DBS' answer. Selecting the text will not indicate to you that you've selected any more than "This is visible", but pasting it into Notepad will show everything. Seems perfect for small ARGs or internet-based puzzles.
div {
color: #000;
background-color: #FFF;
}
.hidden1{
/* Match the background colour */
color: #FFF;
font-size: 0;
}
.hidden2{
/* Transparent text, should work on any background colour */
color: rgba(0,0,0,0);
font-size: 0;
}
<div>
This is visible.
<span class="hidden1">This is not.</span>
<span class="hidden2">Nor is this.</span>
</div>
I'm currently trying to make a text box with hiding overflowing text. It works fine, but for some part. I'm using
text-overflow: ellipsis;
This should put three dots ("...") at the place where my text is cut off, but it doesn't place three dots, instead it places the character which looks like three dots (called 'ellipsis').
The font I'm currently using doesn't have this character, so it shows some other random character instead of three dots.
Does anyone have a simple workaround (no javascript involved please, only CSS), while keeping my font for the text ?
To completely imitate the functionality of text-overflow: ellipsis without using JavaScript while still having complete browser support (text-overflow: "..." only works in Firefox 9 in the time of this post, and is completely unavailable on any other browser) is extremely difficult (if not impossible).
The only solution I can think of without any "hacks" is to edit your font file, creating a unicode character for the ... ellipsis character. I have next to no experience in this area, but here's a link that seems pretty good: http://sourceforge.net/projects/ttfedit/
Here's some HTML code I've got:
<div id="wrapoff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula, augue id pretium euismod, nisi dolor sodales orci, non porttitor ligula velit ac lorem.
</div>
And some CSS:
#wrapoff {
width: 200px;
border: 2px solid blue;
white-space: nowrap;
overflow: hidden;
position: relative;
}
#wrapoff:after {
content: "...";
position: absolute;
right: 0;
top: 0;
background-color: white;
padding: 0 5px;
}
This adds a pseudo-element on top of the #wrapoff div, at the top right hand corner, allowing the content to work like text-overflow: ellipsis. The downside to this is that the "ellipsis" always shows there, regardless of whether the content actually extends off and overflows. This cannot be fixed, as there is no way using CSS to figure out whether the text overflows off the page.
Here's a JSFiddle:
http://jsfiddle.net/ysoxyuje/
The border is to show you the size of the element itself.
Make sure you have
white-space: nowrap;
overflow: hidden;
with your
text-overflow: ellipsis;
http://jsfiddle.net/cbppL/707/
HTML
<header>
<h1>Long text is so long oh my is long indeed</h1>
</header>
CSS
header {
border:1px solid red;
width:150px;
position:relative;
}
h1 {
overflow:hidden;
white-space:nowrap;
/* -ms-text-overflow:ellipsis; */
/* text-overflow:ellipsis; */
width:150px;
height:1.2em;
}
header:after{
content:"...";
position:absolute;
top:0;
right:0;
background:#fff;
}
h1:hover {
overflow:visible;
}
Not a very good solution. It will depend on what kind of background you have. Hope Helps!
Instead of "ellipsis", you can actually specify your own set of characters to signify text overflowing.
If your custom font has the period defined, you should be able to just use three periods like this:
text-overflow: '...';
Here's a JSFiddle of it in action: http://jsfiddle.net/x5e6yv21/
From what I understand you're problem is that, in the font you're using, you're missing the ellipsis character.
To quickly fix this you could select this last-letter with the ::last-letter pseudo-element selectorand change the font-family property to another font that supports ellipsis _
So, I know this isn't ideal but it is a work-around. The CSS3 specification says that the ellipsis must take their style from the container that they're in. This works correctly in all browsers except IE8/9 which takes it's ellipsis style from the first letter of the container. The work-around I propose is to wrap the text inside of your "overflowed" elements with an inline element, give the outer container a font where the ellipsis character is defined and give the inline element inside your custom font. It would look something like this fiddle: http://jsfiddle.net/u9dudost/2/
If you need to add IE8/9 support, add the following:
div {
white-space: nowrap;
}
div::before {
font-family: 'Helvetica', sans-serif; /* Your custom font here. */
content: ''; /* IE9 fix */
}
You need to use the following together:
white-space: nowrap;
text-overflow: ellipsis;
I am implementing a closable <div> using pure CSS and not Javascript.
HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<style>
div.messages
{
padding: 10px;
background-image: none;
border: 1px solid transparent;
border-color: #bce8a1;
border-radius: 5px;
width: 300px;
}
div.messages:before
{
content: "\274C";
float: right;
cursor: pointer;
}
div.messages:active
{
height: 0px;
display: none;
}
</style>
</head>
<body>
<div class= "messages">
In publishing and graphic design, lorem ipsum is a filler text commonly used to demonstrate the graphic elements of a document or visual presentation. Replacing meaningful content that could be distracting with placeholder text may allow viewers to focus on graphic aspects such as font, typography, and page layout. It also reduces the need for the designer to come up with meaningful text, as they can instead use hastily generated lorem ipsum text.
</div>
</body>
</html>
The code works (sort of) but am having a few notes that I would like to ask for help with
The close works OK on Firefox; Chrome appears to close also but the <div> reappears as soon as the mouse is released
The <div> blinks whenever I click anywhere within its bounds. How do I make it remain showing?
The problem here is you are using :active to modify your div. Active is a css word reserved for mouse events on an element. I have myself never found need to use :active on a div. (In essence I use them for clickable objects ie. anchors, buttons). Now :active is also only applied when click is happening.
You'll notice clicking in the center of the div will also mike it shrink to height: 0px.
Solution:
-The proper solution would use js, toggled by a button, to apply a class to the div you want to shrink. The class will have height: 0; display:none;
-You could hack this using anchor with :active. But this is bad practice.(I will update with this when I get the chance)
How to achieve same output without <br>?
<p>hello <br> How are you </p>
output:
hello
How are you
You can use white-space: pre; to make elements act like <pre>, which preserves newlines. Example:
p {
white-space: pre;
}
<p>hello
How are you</p>
Note for IE that this only works in IE8+.
Impossible with the same HTML structure, you must have something to distinguish between Hello and How are you.
I suggest using spans that you will then display as blocks (just like a <div> actually).
p span {
display: block;
}
<p><span>hello</span><span>How are you</span></p>
Use <br/> as normal, but hide it with display: none when you don't want it.
I would expect most people finding this question want to use css / responsive design to decide whether or not a line-break appears in a specific place. (and don't have anything personal against <br/>)
While not immediately obvious, you can actually apply display:none to a <br/> tag to hide it, which enables the use of media queries in tandem with semantic BR tags.
<div>
The quick brown fox<br />
jumps over the lazy dog
</div>
#media screen and (min-width: 20em) {
br {
display: none; /* hide the BR tag for wider screens (i.e. disable the line break) */
}
}
This is useful in responsive design where you need to force text into two lines at an exact break.
jsfiddle example
There are several options for defining the handling of white spaces and line breaks.
If one can put the content in e.g. a <p> tag it is pretty easy to get whatever one wants.
For preserving line breaks but not white spaces use pre-line (not pre) like in:
<style>
p {
white-space: pre-line; /* collapse WS, preserve LB */
}
</style>
<p>hello
How are you</p>
If another behavior is wanted choose among one of these (WS=WhiteSpace, LB=LineBreak):
white-space: normal; /* collapse WS, wrap as necessary, collapse LB */
white-space: nowrap; /* collapse WS, no wrapping, collapse LB */
white-space: pre; /* preserve WS, no wrapping, preserve LB */
white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
white-space: inherit; /* all as parent element */
SOURCE: W3 Schools
The "\a" command in CSS generates a carriage return. This is CSS, not HTML, so it shall be closer to what you want: no extra markup.
In a blockquote, the example below displays both the title and the source link and separate the two with a carriage return ("\a"):
blockquote[title][cite]:after {
content:attr(title)"\a"attr(cite)
}
In the CSS use the code
p {
white-space: pre-line;
}
With this CSS every enter inside the P tag will be a break-line at the HTML.
Building on what has been said before, this is a pure CSS solution that works.
<style>
span {
display: inline;
}
span:before {
content: "\a ";
white-space: pre;
}
</style>
<p>
First line of text. <span>Next line.</span>
</p>
To make an element have a line break afterwards, assign it:
display:block;
Non-floated elements after a block level element will appear on the next line. Many elements, such as <p> and <div> are already block level elements so you can just use those.
But while this is good to know, this really depends more on the context of your content. In your example, you would not want to use CSS to force a line break. The <br /> is appropriate because semantically the p tag is the the most appropriate for the text you are displaying. More markup just to hang CSS off it is unnecessary. Technically it's not exactly a paragraph, but there is no <greeting> tag, so use what you have. Describing your content well with HTMl is way more important - after you have that then figure out how to make it look pretty.
<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------
OR
<div style="white-space:pre"> <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div> <-----------------------------------
source: https://stackoverflow.com/a/36191199/2377343
Here's a bad solution to a bad question, but one that literally meets the brief:
p {
width : 12ex;
}
p:before {
content: ".";
float: right;
padding-left: 6ex;
visibility: hidden;
}
Use overflow-wrap: break-word; like:
.yourelement{
overflow-wrap: break-word;
}
Maybe someone will have the same issue as me:
I was in a element with display: flex so I had to use flex-direction: column.
For a List of Links
The other answers provide some good ways of adding line breaks, depending on the situation. But it should be noted that the :after selector is one of the better ways to do this for CSS control over lists of links (and similar things), for reasons noted below.
Here's an example, assuming a table of contents:
<style type="text/css">
.toc a:after{ content: "\a"; white-space: pre; }
</style>
<span class="toc">
Item A1 Item A2
Item B1 Item B2
</span>
And here's Simon_Weaver's technique, which is simpler and more compatible. It doesn't separate style and content as much, requires more code, and there may be cases where you want to add breaks after the fact. Still a great solution though, especially for older IE.
<style type="text/css">
.toc br{ display: none; } /* comment out for horizontal links */
</style>
<span class="toc">
Item A1<br/> Item A2<br/>
Item B1<br/> Item B2<br/>
</span>
Note the advantages of the above solutions:
No matter the whitespace in the HTML, the output is the same (vs. pre)
No extra padding is added to the elements (see NickG's display:block comments)
You can easily switch between horizontal and vertical lists of links with some shared CSS without going into every HTML file for a style change
No float or clear styles affecting surrounding content
The style is separate from the content (vs. <br/>, or pre with hard-coded breaks)
This can also work for loose links using a.toc:after and <a class="toc">
You can add multiple breaks and even prefix/suffix text
Setting a br tag to display: none is helpful, but then you can end up with WordsRunTogether. I've found it more helpful to instead replace it with a space character, like so:
HTML:
<h1>
Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>
CSS:
#media (min-device-width: 1281px){
h1 br {content: ' ';}
h1 br:after {content: ' ';}
}
I like very simple solutions, here is one more:
<p>hello <span>How are you</span></p>
and CSS:
p {
display: flex;
flex-direction: column;
}
How about<pre> tag?
source: http://www.w3schools.com/tags/tag_pre.asp
The code can be:
<div class="text-class"><span>hello</span><span>How are you</span></div>
CSS would be:
.text-class {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
You need to declare the content within <span class="class_name"></span>. After it the line will be break.
\A means line feed character.
.class_name::after {
content: "\A";
white-space: pre;
}
You can add a lot of padding and force text to be split to new line, for example
p {
padding-right: 50%;
}
Worked fine for me in a situation with responsive design, where only within a certain width range it was needed for text to be split.
Using white-space will not work for long sentences without spaces like HiHowAreYouHopeYouAreDoingGood...etc to fix this consider using word-wrap: break-word; instead
it's made to allow long words to be able to break and wrap onto the next line., its used by Facebook, Instagram and me 😆
Example
#container {
width: 40%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#container p{
white-space: pre-line;
background-color: green;
}
.flex{
display: flex;
}
#wrap {
width: 30%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#wrap p{
word-wrap: break-word;
background-color: green;
}
<h1> white-space: pre-line;</h1>
<div class='flex'>
<div id="container">
<h5>With spaces </h5>
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<div id="container">
<h5>No specaes (not working )</h5> <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>
<h1> word-wrap: break-word;</h1>
<div class='flex'>
<div id="wrap">
<h5>With spaces </h5>
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<div id="wrap">
<h5>No specaes (working )</h5> <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>
On CSS-tricks, Chris Coyier have tested lots of options and the final and pretty neat one was using display:table, Each one have their own problems which you will find out when you use background-color on the span!
body {
padding: 20px;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: 300;
font-size: 24px;
line-height: 1.6;
background: #eee;
padding: 20px;
margin: 5px 0 25px 0;
text-align:center;
}
h1 span {
color: white;
font-weight: 900;
}
h1 span {
background: black;
padding: 1px 8px;
display: table;
margin:auto;
}
<h1 class="one">
Break right after this
<span>
and before this
</span>
</h1>
Here You can see all other options on codepen:
Injecting a Line Break
A modern and simple solution could be setting the width like that:
width: min-content;
This CSS rule is mostly useful for text content, but not only:
https://developer.mozilla.org/en-US/docs/Web/CSS/min-content
p {
margin: 20px;
color: #222;
font-family:'Century Gothic', sans-serif;
border: 2px dotted grey;
padding: 3px;
}
.max {
width: max-content;
}
.min {
width: min-content;
}
<!DOCTYPE html>
<html lang="en">
<head />
<body>
<p class="max"> Max width available </p>
<p class="min"> Min width available </p>
</body>
</html>
Both Vincent Robert and Joey Adams answers are valid. If you don't want, however, change the markup, you can just insert a <br /> using javascript.
There is no way to do it in CSS without changing the markup.
In my case, I needed an input button to have a line break before it.
I applied the following style to the button and it worked:
clear:both;
In case this helps someone...
You could do this:
<p>This is an <a class="on-new-line">inline link</a>?</p>
With this css:
a.on-new-line:before {
content: ' ';
font-size:0;
display:block;
line-height:0;
}
Using instead of spaces will prevent a break.
<span>I DONT WANT TO BREAK THIS LINE UP, but this text can be on any line.</span>
I'm guessing you did not want to use a breakpoint because it will always break the line. Is that correct? If so how about adding a breakpoint <br /> in your text, then giving it a class like <br class="hidebreak"/> then using media query right above the size you want it to break to hide the <br /> so it breaks at a specific width but stays inline above that width.
HTML:
<p>
The below line breaks at 766px.
</p>
<p>
This is the line of text<br class="hidebreak"> I want to break.
</p>
CSS:
#media (min-width: 767px) {
br.hidebreak {display:none;}
}
https://jsfiddle.net/517Design/o71yw5vd/
This works in Chrome:
p::after {
content: "-";
color: transparent;
display: block;
}