Given a block container
<div>
this is a very long string which contains a bunch of characters that I want to break at container edges.
</div>
are there any css properties I can set to force it to break when it reaches the container width, regardless of the contents of the string, for example a break like:
this is a ve
ry long stri
ng which ...
is pretty much what I want. Right now, it seems to always prefer to break at whitespace characters or other special characters (such as /).
There's a CSS3 property called word-break that may be of some use to you in future.
More information is available here: http://www.css3.com/css-word-break/
The break-all value looks to do the thing you're asking for:
Useful where content contains a majority of Asian character set content, to which this value behaves like ‘normal’. Non-Asian character set content may be arbitrarily broken across lines.
As for more supported versions of CSS, I don't believe there's a way you can do this.
Try this
<style type="text/css">
div {
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}
</style>
<div style="width:200px">
adsjflk;asjfl;kasdjfl;kasdjfl;kasdjf;lkasdjf;lkasdjf;lkasjdf;lkajsd;lkadfjs;l
</div>
Alternative way achieve the same by enclosing the div in a parent div and setting the width of the parent div. Though it might not be the ideal solution.
<div style="width:50px">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</div>
Related
I have a parent div with a certain size and inside him I have other divs and if any of those child divs start showing their content out of the parent div I want to delete that div, and no I don't want to put it hidden with the overflow I really want to delete him. I tried to search the solution but I didn't found any. How can I manage this problem?
I have this JSFiddle to a better understading the problem.
Here is the code:
<div style="width: 300px; height: 55px; background-color: gray">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div style="border: 2px solid red">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <strong>I WANT DO DELETE THIS DIV!</strong>
</div>
</div>
I don't know if I can do this with Blazor but I'm here to learn.
Thank you for your attention.
Basically you can do this by looping over the children, and checking if their top corner is “higher” on the Y axis (“higher” value on that axis meaning, it is lower down on the screen), than the parent’s own height. You can use the offsetTop property here, if the parent element is also the offsetParent of the children - if positioning is involved anywhere, that might change the offsetParent, so in that case you might need to work with coordinates relative to the viewport.
var p = document.getElementById('parent'),
c = p.children;
for(var i=c.length-1; i>=0; --i) {
console.log(c[i], c[i].offsetTop, p.offsetHeight)
if(c[i].offsetTop >= p.offsetHeight || c[i].offsetHeight > p.offsetHeight) {
p.removeChild(c[i]);
}
}
#parent { position: relative; }
foo
<br>
<div id="parent" style="width: 300px; height: 55px; background-color: gray">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div style="border: 2px solid red">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <strong>I WANT DO DELETE THIS DIV!</strong>
</div>
</div>
I am looping over the children in reverse order here - that gives less hassle with removing elements, and the index of the remaining elements in the live HTMLCollection returned by children.
I introduced the foo<br> at the beginning here, so that the whole element is set off a bit from the viewport - then you’ll notice how setting the parent to position:relative changes the offsetTop values, remove that from the CSS and see how the values in the debug output change.
Now this is a trivial way to do this, based on your rather trivial example. In more complex layout situations, it might not work that easily.
Edit: Need to check not only the offsetTop, but the offsetHeight as well. Otherwise, the last element might not get removed, if it is higher than the parent itself.
you need to add a css attribute overflow : hidden
See more: https://developer.mozilla.org/fr/docs/Web/CSS/overflow
I think this will work.. Try this code..
css
div div:not(:first-child) {
display: none;
}
The CSS property text-transform and the pseudo-element ::first-line have been part of CSS spec for a long time, but for some reason unknown to humanity, Webkit browsers still don't allow these to be combined. The combination works seamlessly and as expected in Firefox and "modern versions of IE" (which used to be an oxymoron).
Is there a workaround for this? (ideally without utilizing javascript)
I would like to use CSS to style the first line of a paragraph to be in all caps, and it should work in Chrome as well as Firefox.
You can get close by using font-variant: small-caps;, if you modify the font size of the first line and first letter (assuming the first letter is the only one capitalized):
div {
font: 16px verdana;
}
div::first-line {
font-variant: small-caps;
font-size: 150%;
}
div::first-letter {
font-size: 70%;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
OK, using Rick Hitchcock's answer, I have a CSS work-around for this. By combining font-variant: small-caps and increasing the font size, you can get webkit browsers to deliver this basic look. small-caps isn't a good-looking typography for some fonts, and your mileage may vary. I'm wrapping my CSS in a webkit-specific media-query so that the simpler text-transform will take effect on non-webkit browsers.
This code is working for me:
p.opener::first-line {
text-transform: uppercase;
}
...
/* Fix Webkit ::first-line issues */
#media screen and (-webkit-min-device-pixel-ratio:0) {
p.opener::first-line {
font-size:24px;
font-variant: small-caps;
}
p.opener::first-letter {
font-size:19px;
}
}
The CSS property text-transform and the pseudo-element ::first-line have been part of CSS spec for a long time, but for some reason unknown to humanity, Webkit browsers still don't allow these to be combined. The combination works seamlessly and as expected in Firefox and "modern versions of IE" (which used to be an oxymoron).
Is there a workaround for this? (ideally without utilizing javascript)
I would like to use CSS to style the first line of a paragraph to be in all caps, and it should work in Chrome as well as Firefox.
You can get close by using font-variant: small-caps;, if you modify the font size of the first line and first letter (assuming the first letter is the only one capitalized):
div {
font: 16px verdana;
}
div::first-line {
font-variant: small-caps;
font-size: 150%;
}
div::first-letter {
font-size: 70%;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
OK, using Rick Hitchcock's answer, I have a CSS work-around for this. By combining font-variant: small-caps and increasing the font size, you can get webkit browsers to deliver this basic look. small-caps isn't a good-looking typography for some fonts, and your mileage may vary. I'm wrapping my CSS in a webkit-specific media-query so that the simpler text-transform will take effect on non-webkit browsers.
This code is working for me:
p.opener::first-line {
text-transform: uppercase;
}
...
/* Fix Webkit ::first-line issues */
#media screen and (-webkit-min-device-pixel-ratio:0) {
p.opener::first-line {
font-size:24px;
font-variant: small-caps;
}
p.opener::first-letter {
font-size:19px;
}
}
See markup + css below, or this fiddle:
http://jsfiddle.net/gq9w6/15/ ... in IE7 (or IE8/9 compatibility view)
The "Lorem ipsum" text should be wrapping around both divs #1 and #3, but in IE7, it clears div #1.
How can I get IE7 to behave in this scenario?
HTML:
<div id="div1">Feature image</div>
<div id="div2">
<div id="div4" class="a">fb like</div>
<div id="div5" class="a">g-plus1</div>
<div id="div5" class="a">tweet</div>
</div>
<div id="div3">related topics list</div>
<div id="div7">bi-line</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
CSS:
#div1{border:1px dotted green;float:left;width:100px;height:100px;}
#div2{height:15px;}
#div3{float:right;clear:both;width:100px;height:30px;border:1px dotted green;}
.a{float:left;width:70px;border:1px dotted red;}
#div7{text-align:left;}
UPDATE:
HTML/CSS and fiddle to (/14) all updated with sample text that shows the purpsoe of each div.
UPDATE
Written description of requirements:
A featured image floated to the left
A series of social-media share buttons to the right of the image, in a horizontal row with the top of the row aligned with the top the featured image
a by-line beneath the social-media buttons (they're not wrapping correctly in the fiddle, but never mind, that's easy to fix)
A "related topics" widget floated right, clearing the featured image (top edge of the former aligned with the bottom edge of the latter)
article text beginning beneath the by-line, wrapping around the rest of the featured image as well as the related topics widget
In your code #div1 is floated to the left which takes out of the document flow, leaving #div2 to occupy the space, although the contents is being pushed by the float. Your #div3 is actually clearing all floats and is floated to the right (it's the reason it's on the same level as the bottom of #div1. Not sure what #div7 is doing. Is it also supposed to float?
What are you trying to achieve?
If you add float: left to #div2 and #div7 and remove clear: both from #div3 you will get the same result in all browsers.
There is no reason this should be difficult to achieve. Back in the way day you could just create a table and put the image on the first cell and the text on the second. Easy as pie.
For some reason I am having a hell of a time getting this to work with css, and I know css pretty fluently. I'm sure I'm just overlooking a hopefully easy answer.
What I'm looking to achieve:
Dynamic sized (being pulled from database) image floated to the left - Description text to the right with out wrapping below image when it reaches the image height.
What won't work:
Setting a margin-left on the text (width of image is not consistent)
Setting a width / floating right on text (again, image width is dynamic so proper width on text would be unknown)
Example Code (pre css):
<div class="demo">
<img src="dynamic_sized_image.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Hopefully there is an answer!!
Thank you!
Here is solution for your issue ( p { overflow: hidden} )
http://jsfiddle.net/simoncereska/BnQRW/
I don't think this is possible with pure css because you have an attribute that is dynamic.
Use javascript to calculate the img width, then you can find out the width of the text (provided the #demo container is a fixed size). Set the widths via js and use this css: http://jsfiddle.net/GcV3S/
The easiest and best way is just to set a fixed image size. Just scale these, this will is most cases improve the layout and look and feel of your website. If you really need to have this without setting a fixed width for the text-block or image-block I don't really know an answer at this moment, sorry.
The only way I can think of right now is using javascript to alter the width of the text... None the less a interesting question.