I have a fixed width conatiner and a h3 tag inside it. When the text in the h3 tag would overflow my container it wraps into an other line while keeping words together as default. I want to embed an inline image which is connected to the word before it, so when the wrap occurs it is treated as a part of that word.
example As seen in the example the sun icon breaks into a new line, while i want it to be treated as it is the part of the word 'need', so the page would break the 'need' word into a new line with the sun icon. fiddle
If you don't mind modifying your html, you can wrap the word and them image in an element (div, span, whatever) with display: inline block. I modified your fiddle.
You need to use a container with white-space nowrap applied on it.
.holder {
width: 150px;
height: 100px;
border: 1px solid;
}
img {
width: 0.9em;
position: relative;
top: 3px;
}
span {
word-space: nowrap;
display: inline-block;
}
<div class="holder">
<h3>Example text <span>need<img src="http://files.softicons.com/download/web-icons/vector-stylish-weather-icons-by-bartosz-kaszubowski/png/256x256/sun.rays.small.png" alt=""></span> more words </h3>
</div>
Related
I have a bit of clarification regarding line-height in css .I tried the following code:
.red {
line-height: 4.1;
border: solid red;
}
.box {
width: 18em;
display: block;
vertical-align: top;
font-size: 15px;
}
<div class="box red">
<div>Avoid unexpected results by using unit-less line-height</div>
length and percentage line-heights have poor inheritance behaviour ...
</div>
In the example above , I havent used display:inline or display:inline-block ,but still I am able to see the spacing between the text .Why is it?
Also , I have one more clarification : when I apply line-height : 25em; on an inline-block element say <div style="display:inline-block;line-height : 25em;"></div> ,
will the space occupy on top and bottom of this element with respect to its parent or the spacing will occur for the inline elements of its children?
In the example above , I havent used display:inline or
display:inline-block ,but still I am able to see the spacing between
the text .Why is it?
An element inherit line-height from its parent, no matter it is an inline/inline-block/block, but as you can see below, a block element behaves different than an inline, where the block element itself is not affected (no space between the div elements) but its content is.
body {
line-height: 4;
}
div, span {
background: lightblue;
}
div + div, span + span {
background: lightgreen;
line-height: 3;
}
div + div + div {
background: lightgray;
line-height: 2.5;
}
<span>
This is a sample text inside a span element<br>
that has a line break making this come in 2 lines
</span>
<span>
This is a sample text inside a span element
</span>
<div>
This is a sample text inside a div element<br>
that has a line break making this come in 2 lines
</div>
<div>
This is a sample text inside a div element
</div>
<div>
<span>
This is a sample text inside a span element<br>
that has a line break making this come in 2 lines
</span>
<span>
This is a sample text inside a span element
</span>
<div>
When I apply line-height : 25em; on an inline-block element say <div
style="display:inline-block;line-height : 25em;"></div> , will the
space occupy on top and bottom of this element with respect to its
parent or the spacing will occur for the inline elements of its
children?
For its children
div:nth-child(2) {
display: inline-block;
line-height: 4;
background: lightgreen;
}
div:nth-child(1),
div:nth-child(3) {
background: lightblue;
}
<div>
This is a sample text displayed as block
</div>
<div>
This is a sample text displayed as inline-block
</div>
<div>
This is a sample text displayed as block
</div>
Line height gives the line the text is sitting on a height value. Think of it as when writing in a notepad. When changing the line heights, you are changing the distance between the lines regardless of whether the sentence overflows onto the next line.
If you are trying to achieve a gap between sentences, separate them with "p" tags and then add padding and or margin to your tags.
.p { margin: 10px 0; }
.p { padding: 10px 0px; }
Hello i think the problem in not for line height. I think the main problem is -
width:18em;
Be clear about em. Basically em depends on its parents value. Read this carefully. I think your problem will be solved. If you still face problem then use -
width:100%;
In a page, I have a container of fixed width which contains an inline-block element, followed by some text.
Sometimes, this text will be wider than the container. When this happens, I want it to break to the next line (as seen in the first example below).
Sometimes, this text will also be too wide to display within the container. When this happens, I want the excess to be truncated (overflow: hidden). However, when I try doing this the obvious way, a line break gets inserted after the inline-block element (as seen in the second example).
I can work around this by wrapping the inline-block element and the first letter of the text together in a <nobr> element (as seen in the third example -- or an equivalent white-space:nowrap wrapper), but this seems like a really ugly way of going about things. Is there a better way of doing this?
.container {
outline: 2px solid blue;
width: 150px;
overflow: hidden;
margin: 10px;
}
.inlineblock {
display: inline-block;
width: 30px; height: 1.5em; vertical-align: middle;
background: gray;
}
<div class="container">
<span class="inlineblock"></span>line breaks only at spaces
</div>
<div class="container">
<span class="inlineblock"></span>widetextwidetextwidetext second line
</div>
<div class="container">
<nobr><span class="inlineblock"></span>w</nobr>idetextwidetextwidetext ugly workaround
</div>
It looks like the first character doesn't need to be in the <nobr> element, so this will work:
<nobr><span class="inlineblock"></span></nobr>wide...
Still ugly, but definitely less ugly! It works on Firefox and Chrome at least.
I'm trying to add some text after a textbox in-line. I want it to be "attached" to the textbox, but I also want it to ignore any other divs that would try to force it to a new line. The reason for this is my text boxes are somewhat close to the border of my wrapper div, and I want the text to not be affected by this wrapper div while still having its positioning relative to the textbox.
Is there a feasible way to do this? I've tried using absolute positioning but that is making it tough to keep my page responsive.
Edit:
By request, here's the simplest example I can think of:
http://jsfiddle.net/zzaq5h4q/3/
#wrapper {
width: 40%;
height: 400px;
background-color: #cccccc;
}
<div id="wrapper">
<input type="text" name="textbox" />I want this text to stay inline, even past the wrapper!
</div>
You can stop the text from wrapping by using white-space: nowrap; as it stops the text from breaking at the nearest whitespace when it runs out of space.
nowrap
Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
(https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
By default overflow is set to visible on #wrapper which means content can spill out of it and still be shown.
visible
Default value. Content is not clipped, it may be rendered outside the content box.
(https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)
#wrapper {
background-color: #cccccc;
white-space: nowrap;
width: 40%;
}
<div id="wrapper">
<input type="text" name="textbox" />I want this text to stay inline, even past the wrapper!
</div>
You can't go past the wrapper, but you can wrap your text in paragraph tags.
Here's an example
p {
width: 40%;
display: inline-block;
margin-top: -1px;
}
#wrapper {
width: 40%;
height: 400px;
background-color: #cccccc;
}
input {
vertical-align: top;
display: inline;
}
<div id="wrapper">
<input type="text" name="textbox" />
<p>I want this text to stay inline, even past the wrapper!</p>
</div>
When setting the background color of a <H1> tag(or any <H*> tag) the element spans the length of the body element of the HTML page.
<H1>A</H1>
H1
{
background: #ddd;
}
The following image shows the problem and ideal result
I can get the desired effect by statically setting the width of the <H1> tag in the css like
H1
{
background: #ddd;
width: 10px;
}
The problem with this is that if I have text inside the <H1> tag that is bigger than 10px it will overflow the background.
h1 elements use display: block, which is the correct default behavior. It prevents subsequent content from appearing on the same line, and allows borders and backgrounds to be the (appropriate) full width of the content region.
If you need the element to only take the width of the text, use one of the following methods:
an inner element such as <h1><span>h1</span></h1> so that you can select the inner element to provide the background.
span {
background-color: #CCC;
}
<h1><span>h1</span></h1>
display: inline if you want the heading to be treated as inline text and flow appropriately.
h1 {
background-color: #CCC;
display: inline;
}
<h1>h1</h1>
<!-- here's where this fails -->
<h1>h1 again</h1>
display: inline-block if you want the heading to have the features of a block element (such as being able to set padding, height, and width)
h1 {
background-color: #CCC;
border: 1px solid #000;
display: inline-block;
padding: 2px 3px;
}
<h1>h1</h1>
<!-- here's where this fails -->
<h1>h1 again</h1>
float: left; clear: both; if you want the heading to align to the left, but ignore other floated elements. The issue with this one is that it will no longer collapse margins.
h1 {
background-color: #CCC;
clear: both;
float: left;
}
<h1>h1</h1>
<h1>h1 again</h1>
No need to set the width. Just update the display type from block to inline or inline-block, if needed.
Something like this:
h1.ib {
display: inline-block;
}
Fiddle: http://jsfiddle.net/v3f2obr1/
You can control the layout mode of the elements with the display property.
However, there is a problem: most values that make the box shrink to its content instead of growing to cover the container block are inline-level, e.g. inline-block, inline-table, inline-flex. That means that, if there is other inline content around your headers, they will be displayed in the same line (if they fit).
Probably, you don't want that. Then, you can use display: table:
h1 {
display: table;
background-color: #CCC;
}
Before
<h1>h1</h1>
Middle
<h1>h1 again</h1>
After
The table display is block-level, so the header will be in a different line than surrounding inline content. But unlike block, the contents are layed out using the table layout, so the header will shrink to its content.
Edit: Jack Pattishall and zzzzBov beat me to it.
You don't actually have to set the width. There's a CSS property available for solving your problem. display:inline
An inline element only takes up as much width as necessary.
Just set your heading to this.
h1 {
display: inline;
}
Here's a byte-saving way to do it:
H1 {
display: inline;
background-color: #CCCCCC;
}
<h1>Your Text Here</h1><br>
I am very new to CSS. I am creating a DIV and somehow the text is being displayed in middle of the DIV. There is a white-space appearing above the first line of the text.
I am also providing the CSS that I wrote for this DIV.
CSS Code
#CONTAINER {
float: left;
height: auto;
padding-top: 0;
border: 1px solid black;
vertical-align: top;
}
#CONTAINER p {
padding: 0;
margin: 0;
vertical-align: top;
}
Here is the Link to the page. Please refer to the last Div which says Latest News
[enter link description here][1]
In your "Latest news block," there is an h2 element outside of the div that your text is in that is pushing everything down.
<div id="block-nodeblock-21" class="block block-nodeblock">
<h2>Latest News Block</h2> <!----this guy-->
<div class="content">
The element is invisible because you set visibility:hidden, however this does not remove it from the page, so it still affects the position of everything around it. To make it truly hidden, you can
Remove it OR
Set display: none;
First off we need your HTML that goes with it, however also remember that the P tag has got its own whitespace added by default, try - values for your padding under
#CONTAINER p
It is possible, that outside the div, you have set the "text-align" property to the value "center". Out of interest, does this occur in any other browsers?