I have a dynamic text, after which I want to in-line place a button. To make it responsive I want the text to wrap, but I do not want the button to wrap "on its own". So it should always wrap with at least the last word of the text.
This is my minimal example:
https://jsfiddle.net/emckab7q/
.wrapper {
white-space: nowrap;
}
.text {
margin-right: 1rem;
white-space: normal;
}
button {
height: 24px;
width: 24px;
}
<span class="wrapper">
<span class="text">This is some text of unknown length that can get quite long and thus may wrap</span><button></button>
</span>
Currently it looks like this:
I want it to look like this:
Since the text is dynamic I cannot just place the button inside the text and "no-wrap" it with the last word.
negtive margin combined with padding can do it:
.text {
margin-right: 1rem;
padding-right:24px;
}
button {
height: 24px;
width: 24px;
margin-left:-24px; /* same as padding */
}
<span class="wrapper">
<span class="text">This is some text of unknown length that can get quite long and thus may wrap</span><button></button>
</span>
Related
I am trying to make a simple
label: value
pairing look nice. The problem I have is that when the value is so long that it wraps around and goes on to a second line, the second line starts below the label text. I would like it to start on the same horizontal position as the first line of text.
The HTML looks like this:
<div class="status-container">
<span class="status-label">Status:</span>
<span class="status-text">This is some rather long text that I would like to the second line of text to start at the same horizontal position as the first line. At the moment it wraps beneath the 'status:' label which is annoying</span>
</div>
The CSS looks like this:
.status-container {
margin-top: 100px;
}
.status-text {
font-weight: bold;
margin-left: 10px;
}
I have create a PLNKR to show how it looks: https://plnkr.co/edit/qbFj4bwEpPf7aUldvjBU
I am sure I am forgetting something extremely simple and obvious, but it is a while since I did this CSS stuff..... All help much appreciated.
And don't forget the overflow:hidden trick:
.status-label {
float:left; padding-right:10px;
}
.status-text {
overflow:hidden; display:block;
}
<div class="status-container">
<span class="status-label">Status:</span>
<span class="status-text">This is some rather long text that I would like to the second line of text to start at the same horizontal position as the first line. At the moment it wraps beneath the 'status:' label which is annoying</span>
</div>
Probably one of the best/quickest ways with the best browser support is to use display:table:
.status-container {
margin-top: 100px;
display: table;
}
.status-text {
font-weight: bold;
padding-left: 10px;
display: table-cell;
}
.status-label {
display: table-cell;
}
<div class="status-container">
<span class="status-label">Status:</span>
<span class="status-text">This is some rather long text that I would like to the second line of text to start at the same horizontal position as the first line. At the moment it wraps beneath the 'status:' label which is annoying</span>
</div>
Otherwise, if you don't need IE9 support, use a flexbox layout:
.status-container {
margin-top: 100px;
display: flex;
}
.status-text {
font-weight: bold;
padding-left: 10px;
}
<div class="status-container">
<span class="status-label">Status:</span>
<span class="status-text">This is some rather long text that I would like to the second line of text to start at the same horizontal position as the first line. At the moment it wraps beneath the 'status:' label which is annoying</span>
</div>
You can always display them table-like
.status-label{
display:table-cell;
}
.status-text{
display: table-cell;
padding-left:10px;
}
Use inline block in your css classes to make them line up horizontally.
.status-label, .status-text {
display: inline-block;
}
I am using WordPress and applying a class to a section of post text.
Here is my post text
<p>
<span class="disclaimer">A really long line of text that covers more than one line.</span>
</p>
Here is my CSS
p > .disclaimer {
font-size: 50%;
line-height: 50%;
}
Here is my issue:
The font becomes 50% smaller but the line-height does not. No matter what value I input for line-height it will not size properly. The text shows huge spacing when the line wraps around.
You need to put the line-height on the p rather than the span:
p {
line-height: 50%;
width:100px; /* for example only*/
}
.disclaimer {
font-size: 50%;
}
<p><span class="disclaimer">A really long line of text that covers more than one line.</span></p>
try
p > .disclaimer {
font-size: 50%;
line-height: 50%;
display:block;}
line-height works differently for inline elements than it does for block elements.
Try display: block; in your span's css, or if you need to use the span as inlined element you can reference here
I have a div with content like this:
<div class="myDiv">
Here's some text that vary in length <span class="separator">/</span> Some other text <_other elements etc>
</div>
What I want is, only using CSS, to display the first text and hide the rest.
I have tried .myDiv *:not(:first-child) { display: none; } which hides all elements, except the first separator. All texts are still visible.
Is this even possible, only using CSS?
Edit: the text is in variable lenght, but this variation is restricted between 14 and 21 chars. It will never be line breaked. (Added this info for solutions like set the div to a width and visibility:hidden or solutions like that which is fully acceptable)
This is how I would do it:
<div class="myDiv"><span>Here's some text that vary in length</span> <span class="separator">/<span><span> Some other text </span><span><_other elements etc></span>
</div>
.myDiv > span:not(:first-child) {
display:none;
}
Here is the JSFiddle demo
Separate your text using span properly and then apply the css to hide the spans if its not the first-child
It is not possible to directly select text nodes using CSS so the logical way of achieving this would be to wrap the text in an element and hide that. Unfortunately, this is not an option in this instance as the HTML markup cannot be modified and JavaScript cannot be used.
Luckily, we can rely on two things:
The text will always be on one line
The .separator element will exist
We can therefore use a combination of overflow on .myDiv and a pseudo element in .separator to forcibly hide the unwanted text:
Add height: 1em; and line-height: 1em; to .myDiv to force it only to show one line of text
Add overflow: hidden; to .mDiv to ensure that the overflown content is hidden
Create an :after pseudo element in .separator and set it to display: block; to ensure that it is forced onto a new line. This will ensure that the separator itself (/) is still shown
.myDiv {
height: 1em;
line-height: 1em;
overflow: hidden;
}
.separator:after {
content:"";
display: block;
}
<div class="myDiv">Here's some text that vary in length <span class="separator">/</span> Some other text
<_other elements etc>
</div>
If the separator is not required the CSS can be simplified. The pseudo element can be removed and .separator itself can be set to display: block; to force it onto a new line.
.myDiv {
height: 1em;
line-height: 1em;
overflow: hidden;
}
.separator {
display: block;
}
<div class="myDiv">Here's some text that vary in length <span class="separator">/</span> Some other text
<_other elements etc>
</div>
Edited You can Use this also
.myDiv{
max-width: 28.5ch;
overflow: hidden;
white-space: nowrap;
}
OR
<style>
.myDiv *:first-child
{
display:none;
}
</style>
<div class="myDiv">Here's some text that vary in length <span class="separator"> Some other text <_other elements etc></span>
When the text is long the checkbox goes above the text. How can I make it stay on the same line as the text but break the text if its long? ie give the text white-space:normal but keep the checkbox and the first bit of the text on the same line.
<input style="float: left" type="checkbox" ...etc..> my text
I've amended the markup to use a label and input, but that's not necessary (you'll just need something to contain your checkbox. Take a look at this jsFiddle for an example.
HTML:
<div class="container">
<label><input type="checkbox"> My text - this label can be as long as you want it to be, see?</label>
</div>
CSS:
.container {
width: 150px;
background: red;
}
label {
display: block;
padding-left: 1em;
}
input {
display: inline-block;
margin-left: -1em;
}
The width on the .container is just there to show that this will work when the text wraps: it will work at any width and for responsive designs without anything fixed. It'll look like this:
And here's an example using your original markup (with an added span, I'm assuming you can include that):
<div class="container">
<span><input type="checkbox"> My text - this label can be as long as you want it to be, see?</span>
</div>
UPDATE: Something else that maybe useful for you:
http://jsfiddle.net/persianturtle/FrEsX/3/
Hide's the overflow.
Something like this?
http://jsfiddle.net/persianturtle/vwfwh/3/
If not, draw a picture.
.container {
width: 150px;
height: 200px
}
input {
margin: 25px 25px 50px 50px;
float: left;
}
well I would set fixed width for a.
a {
display: inline-block;
width: 100px; /*whatever number you need*/
}
You can try witch is for Non Breakable Space.
This should be interesting. Here's what I'm trying to do with CSS:
The words "An Example Alignment" should be in a single <h1> element.
The word "Alignment" should be on the second line (easy with a <br /> tag).
The word "An" should be smaller than the other words (easy with a <span> tag).
So we have:
<h1><span>An</span> Example <br />Alignment</h1>
But here's the catch:
I would also like to align the first letters of the 2nd and 3rd words with each other vertically, and that's where I run into problems.
Here's what it should look like: http://jsfiddle.net/Baumr/H2Pzr/
But that's an ugly solution as there are two <h1> elements.
Any ideas of how to do this with CSS by keeping the HTML the same? Very curious to hear. Thank you in advance.
P.S. I could also put "An" into a separate <span>, but I would prefer to keep everything in a single <h1>.)
I'd do the padding by using two display:inline-block spans, to make sure the right margin is always exactly the same (font width varies, depending on the in-use font face).
<h1>
<span class="padding">An</span> Example <br>
<span class="padding"></span> Alignment
</h1>
CSS:
h1 {
font-size: 30px;
}
.padding {
font-size: 20px;
width: 30px;
display:inline-block;
}
Just beware that IE doesn't always use inline-block the right way (although in this case it should).
Update
An even better solution: http://jsfiddle.net/H2Pzr/9/
Use the table-cell display of elements to automatically put them in two columns:
HTML:
<h1>
<span class="first">An</span>
<div class="second">
Example <br>
Alignment
</div>
</h1>
CSS:
h1 {
font-size: 30px;
}
.first {
display:table-cell;
font-size: 20px;
color: #444;
}
.second {
display:table-cell;
}
I would use two span classes in the same H1 tag:
<h1>
<span class="small-text">An</span> Example
<span class="line-two">Alignment</span>
</h1>
Then update your CSS accordingly:
h1 {
font-size: 30px;
}
span.small-text {
font-size: 20px;
}
.line-two{
display:block;
margin-left: 31px;
}
You don't even need the <br /> since you can just display the second span as display:block;
Updated fiddle here: http://jsfiddle.net/H2Pzr/6/
use two span with different class see jsfiddle
<h1><span class="first">An</span> Example <br>
<span class="second">Alignment</span>
</h1>
Try this: (minimal elements!)
<h1>Example <br>Alignment</h1>
h1 {
font-size: 30px;
margin-left: 31px;
}
h1:before
{
content: 'An ';
font-size: 20px;
margin-left: -31px;
}