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.
Related
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>
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>
Complete noob here with HTML/CSS.
I'm trying to get something like this : http://imgur.com/Bc72V4M
Here is my code:
<div id="topbar">
<div class="image">
<img src="images/ghwlogo.png">
</div>
<div class="text">
<h1>TEXT TEXT TEXT TEXT TEXT</h1>
</div>
</div>
I've tried floating the div topbar, then display-inline but it never displays horizontally.
I'm so confused. Following tutorials is easy-peasy, but when you need to figure out how to do this yourself, it's completely different.
I think I'm missing a step somewhere. I feel like this should be really easy but it's not.
img {
display: inline;
vertical-align: middle;
}
.subhead {
display: inline;
vertical-align: middle;
}
<div>
<img src="http://dummyimage.com/100x100/000/fff"/>
<h1 class='subhead'>
TEXT
</h1>
</div>
I removed some HTML; I only add more when I can't think of how to get the effect with just CSS. You can add some back, but you may have to set display: inline on some inner elements then.
Generally, a few different ways of putting elements horizontally:
Floating: Removes it from standard flow layout, and may interfere with the root element's total height. Was previously the preferred method of placement but I feel like there are better alternatives.
Display Inline: Treats an element a bit like text. Cannot have a custom height or various other attributes.
Display Inline-Block: Often a "fix-all" for me when I want something laid out horizontally, but to have other styling aspects like height, border, etc.
Position Absolute: You can make a higher element a "relative element" for absolute positioning by setting position: relative on it. Like floating this takes it out of layout, but it can even overlap elements; useful for certain things. Don't rely on absolute pixel amounts too much.
In my case, once things are laid out horizontally, vertical alignment is the next issue. Remember that adding content could make this block very very tall, so you can't just say "vertical-align to the bottom of the thing". Think of all elements in the div as simply letters in a paragraph; for the smaller ones, you're telling it how to align that one letter. For the biggest ones, you're telling it where that "letter" is aligned compared to the others. So, it's important to set vertical alignment how you want it on the image as well.
EDIT: updated answer per #Katana314 answer. I've maintained the OP's markup.
#topbar {
width: 100%;
overflow: hidden;
}
.image {
display: inline-block;
vertical-align: middle;
border: 5px solid black;
height: 100px;
width: 100px;
}
.text {
display: inline-block;
vertical-align: middle;
}
Fiddle: https://jsfiddle.net/dgautsch/che0dtfk/
You could make the image and the text a separate div and then have both of them under the inline-block attribute. The text div would need to have a position: absolute attribute, though, for formatting purposes.
After viewing the Fiddle, you can adjust the left position attribute accordingly to generate space. Here is the link: https://jsfiddle.net/kuLLd866/.
HTML:
<body>
<div class="image">
<img src="http://gfx2.poged.com/poged/game_logo_default_fix.png?2492">
</div>
<div class="imagetext">
<h1>Text text text</h1>
</div>
</body>
CSS:
.image {
display: inline-block;
}
.imagetext {
position: absolute;
top: 50px;
display: inline-block;
}
I have a situation where I have a layout like in the following fiddle:
<div>
<span style="float:left;">This is a longer text that could potentially split into more than one line.</span>
<span style="float:right;">Force this text into one line.</span>
</div>
jsfiddle demo.
What I am trying to accomplish is that the right span adjusts size so it's as small as possible but fits its content in one line. The left span should adjust to the rest of the main div size and can break text into as many lines as needed.
Restrictions:
Content is variable for both spans. The left one is potentially unlimited, the right one will never take more than about 30% of the screen.
I would really like a pure css/html solution. With Javascript I know how to do it, but it would make it harder to mantain, thus I am exploring something cleaner.
First line of the left span should always be on the same line as the first line of the right one.
How can I do this?
Method #1
If you don't want to specify an explicit width, you can use display: table; for the left span:
.left {
display: table;
background-color: orange; /*Just for demo */
}
.right {
float: right;
white-space: nowrap;
background-color: gold; /*Just for demo */
}
JSFiddle Demo.
Method #2
Also, you can display the left span as a block level element and hide the horizontal overflow by overflow-x: hidden; as follows:
.left {
display: block;
overflow-x: hidden;
}
Updated Demo.
apply width property to both span
<span style="float:left; width:50%;">This is a longer text that could potentially split into more than one line.</span>
<span style="float:right; width:50%;">Force this text into one line.</span>
or see here http://jsfiddle.net/pE2c8/4/, you can understand.
An easy way of doing this is to switch the 2 spans around in your HTML. Add width 100% to the span that should break up, and float right to the full width span.
HTML
<html>
<div>
<span style="float:right;">Force this text into one line.asdsadsadasdsasadsad asd</span>
<span style="width:100%;">This is a longer text that could potentially split into more than one line. </span>
</div>
</html>
FIDDLE
http://jsfiddle.net/pE2c8/6/
I don't think you can get away with achieving this without specifying at least some kind of width properties for your two spans, as you need some way of saying where the first container should break its lines. In this case you knowing that the second container won't take up more than about 30% might be useful.
Fiddle
By using max-width:
.left {
float: left;
max-width: 70%;
}
.right {
float: right;
max-width: 30%;
/* Can add the following for good measure
(will keep on one line even if over 30% wide
and hides the excess) */
white-space: nowrap;
overflow: hidden;
}
I'm trying to create a simple (ha) two column layout, where the first column is variable width and the 2nd column is fixed size.
The first column contains a table which works fine except if the td element contains a pre block. In that case, the pre block extends to the 2nd column.
Here is a simple example:
<div class="content">
<div id="Left">
<table id="q-table">
<tr><td>
<div class="q">
<p>This is some paragraph that will be fairly long and wrap.</p>
<pre>This is a very long pre tag that causes headaches.</p>
</div>
<div>
<p>Causes problems if I make class q position: absolute</p>
</div>
</td></tr>
</table>
</div>
<div id="Right">
<p>This is a paragraph on the right with fixed width</p>
</div>
</div>
Here is the CSS style I'm using for this example:
.content {
width: 95%;
position: relative;
}
#Left {
width: 50%;
float: left;
}
#Right {
float: right;
width: 200px;
}
#q-table {
width: 99%;
}
.q {
overflow: auto;
width: 99%
}
If I make the .q class position: absolute then the horizontal flow mostly behaves like I want, but the following div section moves up and messes the vertical alignment.
The pre tag is the culprit. Removing it causes the correct behavior. Unfortunately, pre tags are a necessity.
Think of a StackOverflow layout where a question with code would show up with the scrollbars on a small screen, but if I have a large monitor, the question area would extend and the scrollbars would disappear.
Anyone have any ideas?
Does CSS provide support for what I'd like to do?
This may not provide the desired result. But you can adjust the white-space property instead.
For example, setting it to normal will make it behave like, say, a p tag:
pre {
white-space: normal;
}
See it in action - http://jsfiddle.net/az85F/
Otherwise, set the width and overflow properties. That's what this very forum does for code samples. A quick example - http://jsfiddle.net/mj6Nh/1/
I have come to the conclusion that it is simply not possible to provide the behavior described.
I believe the problem is that the table and the tags conflict with each other.
The table does not enforce the proportional spacing directive when one of the cell element uses a pre tag.