I am trying to use the CSS property word-wrap with the value break-word in a div.
It works perfectly, but only if I specify the width (and if this one values auto, word-wrap does not work).
The problem is that I want the div to be resizable, so I can't type a specific width for the div at the beginning.
Any ideas to solve this, please? I do not want to use hyphens.
Thank you in advance.
This does not work:
<p style="word-wrap: break-word !important;">loooooooooong_word</p>
This works OK:
<p style="width:100px; word-wrap: break-word !important;">loooooooooong_word</p>
Fiddle
Try to set width:inherit or width:100%
In order for text in a div to wrap you have to specify the white-space CSS property for that div.
Set it to pre-wrap or normal.
eg. Text Wrap
Also you can specify the text-align:justify property if you want the text to appear to be as in newspaper columns.
eg. Justify
<p>loooooooooooong_word</p>
<p style="word-wrap: break-word !important;">loooooooooong_word</p>
<p style="width: 100px; word-wrap: break-word !important;">loooooooooong_word</p>
Fiddle
Try resizing the browser the word wrap works fine...!! you can find the difference between the <p> tad without and with sytle and with fixed pixel
To be more clear the computer is dumb and if you want to break a word you should be specifying the condition at which the word should be broken. without giving the condition how you expect the output?
You could try using the overflow-wrap property to get the word to break.
Further, you could set a limit on resizing by applying a min-width/min-height to the parent container.
Using your example, this is what I mean:
<div style="resize: both; overflow: hidden; min-height: 100px; min-width: 100px; border: 2px dashed black; padding: 5px;">
<p style="overflow-wrap: break-word;">loooooooooooong_word</p>
<p style="overflow-wrap: break-word;">loooooooooooong_word</p>
</div>
Related
I want to have my texts keep all its formatting no matter the size of the screen, however if I were to make the screen small enough it will change its format to fit the screen.
How can I make it so it just stays in its original position and formatting.
<div style="background-color: white; height: 600px; padding: 100px 200px;">
<br><br><br>
<h1 style="font-size: 70px;color:#21ce99;">about me</h1>
<p style="font-size: 20px;color: #0ec998">I'm a Developer and aspiring Entrepreneur <br>from Voorhees, New Jersey in the US.</p>
<p style="font-size: 16px;color: #0ec998">As a young developer, I strive to make complex <br>problems, simple. Combined with my passion <br>for entrepreneurship, I hope to create something<br>that can beneficially impact the world.</p>
</div>
Just add white-space: nowrap; to the container.
JSFiddle demo: https://jsfiddle.net/b2dbyjgx/1/
You could try giving them a minimum width and height by using min-width and min-height properties in your style tags. Make sure not to use relative units of measure such as vh, em, or rems use pixels instead to ignore screen size completely. You should put these properties on the div that surrounds your text.
Simply assign the text you don't want to wrap the CSS' white-space property.
The white-space property specifies how white-space inside an element is handled.
Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a < br > tag is encountered.
Now for more of text properties you can refer : W3school White-space
p{
white-space: nowrap;
}
<p>Your desired textYour desired textYour desired textYour desired textYour desired textYour desired textYour desired textYour desired text</p>
I have a single-line fixed-width container div with two variable-width span inside. Any overflow of the first span should be hidden with an ellipsis. The second span floats on the right and should be shown in full. Please see this Fiddle:
<div class='container'>
<span class='left'>Long long variable stuff</span>
<span class='right'>Changing stuff</span>
</div>
I want the first span's width to dynamically adjust according to the width of the second span so that both span stay on the same line. How can I do that?
You can use Flexbox, so with flex: 1 on .right, .left will adjust its size and overflow will be hidden.
.container {
width: 200px;
display: flex;
border: 1px solid black;
}
.left {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.right {
flex: 1;
white-space: nowrap;
}
<div class='container'>
<span class='left'>Long long variable stuff</span>
<span class='right'>Changing stuff</span>
</div>
I don't think there's any way for CSS to dynamically know the length of an element without javascript. If you're looking for a purely CSS solution you're going to need to give it some direction in order for it to know the widths you want. Visually, that might be a bit of a compromise for you, but it will allow you to ensure that everything is always on one line.
For the solution I'm about to propose to work you need to know one width of the two. In this case I'm going to say that you can make a best guess of the "changing stuff" on the right.
Your first problem is that spans are inline elements by default - not inline-block. In order to get the overflow text property to work, you need to use it with an inline-block or block element.
The next piece is to use calc. Calc excepts mixed measurements so you can subtract an exact pixel value off of a percent. This works really well for responsive layouts.
I've created an updated version of your plunker to illustrate:
https://jsfiddle.net/n19ddahb/5/
Please have a look at this simple jsfiddle. It contains the following code:
<div style="background:yellow; display:inline-block;">
<img src="http://www.wedesoft.de/test/test.png" />
</div>
As you can see, this will output a space under the image so that you can see the yellow colored container. I do not know why, because no space was defined.
Can somebody tell me what is going on please?
An image is an inline element. That means it is treated as text. Text has a line-height. The line-height is what is causing the space at the bottom. There are multiple ways to solve this.
The following are my favorites:
div {
line-height: 0;
}
By setting line-height to 0, the space goes away.
img {
display: block;
}
By making the image a block element, it's no longer considered text, thus, line-height isn't applicable anymore.
As Marc Audet stated in the comments, another way to solve this would be by using vertical-align.
img {
vertical-align: top;
}
It doesn't matter whether you use top or bottom.
This occurs due to the line-height attribute; try this Jsfiddle
Where i just set the line height to 0.
i think you missed line-height try this
<div style="background:yellow;display:inline-block;line-height: 0px;">
<img src="http://www.wedesoft.de/test/test.png">
</div>
other way you can apply style display: block; to img. like
<div style="background:yellow;display:inline-block;">
<img src="http://www.wedesoft.de/test/test.png" style="display: block;">
</div>
For some reason
display:block;
solves this problem as you can see in the accepted answer here:
Remove white space below image
Is still do not know why...
take a look at line-height propety on this web: http://www.w3schools.com/cssref/pr_dim_line-height.asp
basicly what's happening is that there's some default space on the div so that's why you see the yellow line. Adding line-height: 0px; should solve the problem.
to make it simple, i've got following code:
<div>
<a>view all your links</a>
</div>
the width of the div is very small so the text "all your links" sticks out of the div. how do i do to have a new line after "all your" so "links" dont stick out?
If you want to break links visually so they don't extend out of a div, you can add word-wrap: break-word to a in your stylesheet. Thus:
a {
word-wrap: break-word;
}
You have not specified your desired result. Do you want the div to resize to accomodate the entire width of the links? If so, don't put a fixed width on it or any of its ancestor elements. Do you want the overlong links to be cut off? If so, put overflow: hidden in the style of the div.
Use the max-width property for your a links.
Edit: You'll likely need a display: block for your a tag as well.
Use this code:
a {
word-wrap: break-word;
white-space: normal;
}
I am essentially trying to create a version of the "figure" element (upcoming in HTML5), whereby I have an image with a short description below it.
However, I want to limit the width of this entire element to that of the image, so the text isn't wider than the image (wrapping to multiple lines if necessary).
Basic HTML:
<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>
I'm well-versed with CSS but I can't think of any pure CSS solution, without adding a style="width:100px" to the div to match the image width.
Update: After a bit of searching and thinking, the best method seems to be using an inline width on the div. I will keep the width attribute on the image, in case I wish the div to be a bit wider than the image (for example to accomodate a longer caption).
This approach also means I could have two images side-by-side with a caption below. If I have a set of images the same size, I can of course add an extra style to each div.
Thanks to everyone who answered!
This could also be accomplished using 'display: table-caption' for the caption, as follows:
HTML
<div class="wrapper">
<img src="image.jpg" />
<div class="caption">My caption...</div>
</div>
Stylesheet
.wrapper {
display: table;
}
.caption {
display: table-caption;
caption-side: bottom;
}
This block can also be floated left of right of other text. I've tested this in IE8+. Here's a JSBin example: http://jsbin.com/xiyevovelixu/1
For setting the width to match the image automatically you could use
.figure {
display: table;
width: 1px;
}
This makes the div behave like a table (not supported in Internet Explorer). Or you could use a table instead of the div. I don't think there is another way of setting the width automatically.
Edit: The simplest way is to forget about the auto width and set it by hand. If it is really needed you can use JavaScript or a table. In this case the use of a table is not so ugly because you are addressing a limitation of the HTML version. In the case of server-side scripting you could also set the width when generating the page.
Stylesheet
div.figure img,
div.figure div.caption {
width: 100%;
}
div.figure div {
overflow: hidden;
white-space: nowrap;
}
note: to enable wrapping just remove that last css line
HTML
<div class="figure" style="width:150px;">
<img src="logo.png" alt="logo" />
<div class="caption">A description for the image</div>
</div>
I've checked it in Chrome, Firefox and IE7 and it looks good in all three. I realise this has the width on the div and not the img, but at least you only need to set the width in one place. Short of using css-expressions (IE only) I can't see a way of setting the outer divs width to the width of the first child element.
I had the same problem and after reading this decided to use an inline-style on the surrounding element. Seems the better solution over using a table to me.
You can also acheive this using the following solution proposed by Temani Afif in his blog post (All credits to him, I just don't want the solution to be forgotten)
<div class="box">
<img>
<h1>Lorem ipsum dolor ..</h1>
</div>
.box {
display: inline-block;
}
h1 {
width: 0;
min-width: 100%;
}
Make the container inline-block, and makes the h1 (or whatever text tag you use) occupy the space dictated by the sibling element. It's essentially a hack, but it works! No unintended semantic consequences like the table solutions
You could use the display:table solution for all other browsers, and a CSS Behaviour for Internet Explorer.