Quick points, having trouble aligning a text in a table as it wraps the second line. I have treid justifying and block and in-line etc Appreciate any suggestions. What I need is that the second line aligns exactly under the first line eg: starts at vfdbd....
put the text inside a span element with display: inline-block;. That way the text start on the same line.
The wrapper needs to have text justification applied via CSS:
text-align:justify;
text-justify:inter-word;
In general, browsers do a crappy job as fully-justified text compared to "typesetting" applications for print. In general, full-justification on browsers makes text HARDER to read and should generally be avoided.
No need for an extra element if you know the width of the symbol (text or image) you're adding to the left of your first line.
The trick is to add a negative text-indent counter-balanced by a positive margin-left. Say you add a 40px-wide internet kitten via :pseudo + 8px of padding between image and text: the element then needs following first CSS rule:
/* Image is 40px-wide and we want it at 8px from text */
.txt-indent {
margin-left: 48px;
text-indent: -48px;
}
.txt-indent:before {
content: url(https://placekitten.com/40/40);
padding-right: 8px;
}
body {
width: 200px;
line-height: 1.5;
}
<p class="txt-indent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, natus soluta! Itaque, corporis veritatis quisquam ut debitis sed incidunt enim sit ratione sint repellat aliquid sunt rerum commodi asperiores ipsa!</p>
Ended up increasing line-height to make it work.
Related
This question already has answers here:
Font scaling based on size of container
(41 answers)
Closed 2 months ago.
Let's say I have a div with some small text in it.
The intention is that this text should fit into "only" one line. When the container width is big, the text should be justified and when the container width is small, the text should still be in one line and the font size should decrease to preserve being in one line. (Not hiding its over-flow)
I tried text-align: justify; but it doesn't work. since it does not justify the last line. (which in this case, the last line is actually the only line we have.)
Any help one this one is appreciated. Thanks in advance.
there!
If you really want to fit the text in one line, I would do something like this:
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* no. of lines to be shown */
overflow: hidden;
/* general styling */
box-sizing: border-box;
width: 70%;
margin-inline: auto;
padding: 0.25em 0.5em;
background-color: #ccc;
}
p {
/* remove default margin */
margin: 0;
}
<div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta odit corporis perferendis odio nesciunt nihil harum magni ipsam quidem saepe, iusto, praesentium impedit vel commodi exercitationem nam possimus architecto fugit.
<p>
<div>
However, if you don't want your text to be overflown and responsive, you can use the calc() operator to calculate the font-size based on the width of the div.
Alternatively, clamp() is also a good option to go with. But, you need to play around with the numbers.
You can read more about calc() and clamp() operations in MDN Docs.
I hope it helps! :)
I have two elements that I would like to be aligned in a column-like way. These elements also need to be floated to the right of the page. If I float the container containing these two elements to the right, they automatically align in a row-like way. My immediate thought is to specify a width of the container so that they will be forced to move downward. The issue with this is that the two elements are different widths.
<div style="float: right; width: 100px;">
<div style="width: 110px; height:50px; background-color: blue;">
Element 1
</div>
<div style="width: 60px; height:50px; background-color: red;
float:right;">
Element 2
</div>
</div>
paragraph text that will not flow into the bottom element because the container's width prevents it. Filler text.....
If the bottom element is not as wide as the top element, the width of the container makes it wider. This is an issue because I have other text / elements that I would like flow around these side elements, and it looks weird because of the whitespace created by the different in widths.
If I try something like making the parent absolute, as not to effect the other elements on the page, the children don't either.
How can I create elements that are floated in a container without the width of the container affecting the other elements on the page as well? Thanks, Levi
One approach is as below, taking advantage of display: contents comments in the code itself:
/* basic CSS reset to reduce all elements to the same
box-sizing, font, margin and padding: */
*,
::before,
::after {
box-sizing: border-box;
font: normal 1rem / 1.5 sans-serif;
margin: 0;
padding: 0;
}
/* a wrapping element to allow for some dynamic sizing of the
contents: */
main {
/* the width of the <main> element is 80vw (viewport-width units)
unless that is less than 30em (the minimum size it will be) or
unless that size exceeds 1000px (at which point it will take
a width of 1000px maximum): */
width: clamp(30em, 80vw, 1000px);
/* a margin of 1em on the top and bottom top-to-bottom languages: */
margin-block: 1em;
/* a margin of auto on the inline axis, left (start) and right (end)
in left-to-right languages, such as English: */
margin-inline: auto;
}
div.wrapper {
/* for those browsers that are yet to implement
logical properties: */
float: right;
/* equivalent to "float: right" in left-to-right
languages, such as English: */
float: inset-inline-end;
width: 100px;
/* effectively removes this element from the
layout, exposing its contents to the layout
engine: */
display: contents;
}
div.wrapper > div {
/* ensuring that the "display: contents" is
unset, which takes it back to the default
display model: */
display: unset;
/* for those browsers that are yet to implement
logical properties: */
float: right;
/* as above, equivalent to "float: right" in
left-to-right languages, such as English: */
float: inset-inline-end;
height: 50px;
/* forces each element to clear the float of its
siblings: */
clear: both;
/* to hide the overflowing text: */
overflow: hidden;
text-overflow: ellipsis;
}
.wrapper > div:first-child {
background-color: blue;
width: 110px;
}
.wrapper > div:last-child {
background-color: red;
width: 60px;
}
<main>
<div class="wrapper">
<div>
Element 1
</div>
<div>
Element 2
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur perferendis corporis itaque, sequi quod commodi explicabo dolore, totam, libero architecto doloremque nisi illo iste quae ea, laboriosam reprehenderit nemo animi! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Quia reiciendis sapiente blanditiis provident ad ullam consequatur, temporibus ex accusamus est nihil voluptatum totam cupiditate. Ducimus sit deserunt nostrum, dolorem doloremque. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Consectetur perferendis corporis itaque, sequi quod commodi explicabo dolore, totam, libero architecto doloremque nisi illo iste quae ea, laboriosam reprehenderit nemo animi! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quia reiciendis sapiente blanditiis provident ad ullam consequatur, temporibus ex accusamus est nihil voluptatum totam cupiditate. Ducimus sit deserunt nostrum, dolorem doloremque.</p>
</main>
JS Fiddle demo.
References:
CSS logical properties.
display.
float.
Bibliography:
Compatibility of CSS logical properties, from "Can I Use."
I am currently new to HTML and CSS and do not have much knowledge about them. Recently, I came across a problem where my text-cursor is not visible when the background-color of a <div> element is darkish.
Here is an example:
<style>
.PreCode {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: initial;
color: rgb(28,26,26);
background-color: grey;
border: 1px solid black;
text-transform: capitalize;
font-weight: 100;
margin-top: 20px;
text-align: center;
padding: 10px;
}
</style>
Now when ever I try to focus the text written inside of a <div> element with this as the class my text cursor becomes transparent.
Is there any way to prevent this from happening? Is there a way to change the color of the text-cursor to the color of the cursor i.e red?
Here is the <div> code:
<div class="PreCode">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla necessitatibus dolorem suscipit. Quibusdam dolorem eos sunt voluptate neque, unde expedita, error modi, assumenda quisquam repudiandae iste provident rerum vel blanditiis.
</div>
The caret-color property is only supposed to apply to input elements and similar - elements that are intended to be user editable. So, if you apply is to a div (as here), you'll get unexpected results. (And, I suspect that you mean "invisible" rather than "transparent" - unless you actually see transparency being applied, but I suspect it's just that you can't see it against the dark background.)
Do you mean that you want the background colour of the highlighted text to be different from the default? In which case you need to set the background-color property for .PreCode::selection in your CSS.
Also, bear in mind that the way the cursor is rendered on screen depends on your browser and also your operating system. There are ways to set a custom cursor, but I don't think that's your problem here. The default cursor shapes and colours depend ultimately on the reader (i.e. your user's browser and OS). On my system, for example, the pointer is a black arrow with a white outline, and the text marker similarly has an outline. So, whatever background it's on, it remains visible.
It also depends what you mean by "cursor": the mouse pointer? The text-position marker? The actual cursor (the often-flashing vertical line that marks the text-input position)? Because the actual cursor will only be displayed in an editable element (as above), because it marks a text-input position and there isn't one of those at all if the text element doesn't accept user input.
you face that issue because you don't make changes on that line the caret-cursor property is used when you wanna make changes on any text, para, input, and etc.
Caret-Cursor : Set the color of the cursor in input elements.
if you wanna make your cursor color change in the div or see work or not you can add the contenteditable before the class then your code work properly and you also edit your text.
follow the code for the desired output.
<div contenteditable class="PreCode">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla necessitatibus dolorem suscipit. Quibusdam dolorem eos sunt voluptate neque, unde expedita, error modi, assumenda quisquam repudiandae iste provident rerum vel blanditiis.
now your code work properly if you want any help then ping me.
Thanks
I have an image floated to the left of a banner area which is taller than I want the banner to be, this is to leave room for the text to grow without the image cutting off.
When I apply overflow: hidden to .banner the banner clears the image instead of cutting it off.
I understand why this happens but I have been trying to figure out a way to get the desired effect to no avail. See the desired effect below.
I have tried various things like putting the image with a div and applying overflow: hidden to that but I can't seem to get it to work.
I'm sure that the answer is staring me right in the face but I'm just not seeing it.
I have uploaded my code to a JSfiddle for you (with a much smaller image so you can see the effect in the result window)
Thanks in advance.
Here i updated your JSFiddle so you can see the result.
You have to take the image out of the Textflow with position: absolute;.
With this, the image gets cut off, if the text is not high enough to show it all.
You could do it like this, if you know the width of the image: http://codepen.io/pageaffairs/pen/EcJAK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.banner {
margin-top: 35px;
background: #f00;
overflow: hidden;
position: relative;
}
.banner img {
position: absolute; top: 0; left: 0;
}
.caption {
margin-left: 230px;
padding: 20px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="banner">
<div class="image">
<img src="http://placehold.it/220x300" alt="" />
</div>
<div class="caption">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores dicta est, iure libero molestias pariatur. Aperiam aut autem consequatur, deleniti et eum minus nihil perspiciatis provident qui repellendus veniam voluptatem. Aliquid assumenda atque consequatur cumque nesciunt sequi. Adipisci autem cumque iste itaque laudantium necessitatibus optio possimus quam sint vero!</p>
</div>
</div>
</body>
</html>
There are 2 options you could go for:
1 . Apply the float to the image's DIV instead the image itself, and limit the DIV's height to the wanted minimum height.
Example:
.image{ float:left; height:1px; }
JSfiddle example: http://jsfiddle.net/z3zfx7uv/
2 . Get rid of the image and it's DIV altogether and use background-image instead, with appropriate padding-left.
Example:
.banner {
margin-top: 35px;
background: #f00 url(http://placehold.it/220x300) top left no-repeat;
overflow: hidden;
padding-left:220px;
}
JSfiddle example: http://jsfiddle.net/b6zzbowh/
I've got a Twitter feed on my blog. It's working great, but there's an issue with long URLs in tweets. Long URLs break the layout by extending past the width of the container.
My code looks like this:
<ul id="twitter_update_list">
<!-- twitter feed -->
</ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>
The blogger.js script contains the callback function which takes the data from the Twitter request and populates <li> elements to a predefined <ul>.
I'm using the following CSS to automatically break the line (for browsers that support it):
#twitter_update_list li span a {
word-wrap: break-word;
}
I know about the <wbr> tag and was trying to use it with a jquery function that looked like this:
$(document).ready(function(){
$("#twitter_update_list li span a").each(function(){
// a replaceAll string prototype was used here to replace "/" with "<wbr>/"
});
});
However when I tried using that snippet, it would cause IE to stop responding and that's no good.
I'm looking for a block of code I can just drop in that will fix the line break issue (by adding a line break to long URLs). Firefox and Chrome are working properly, but IE7 and IE8 need something more. (I don't care about IE6.)
You can try using: word-break: break-all;
div {
background: lightblue;
border: 1px solid #000;
width: 200px;
margin: 1em;
padding: 1em;
}
.break {
word-break: break-all;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae fugiat fuga fugit cum http://www.ThisLongTextBreaksBecauseItHasWordBreak-BreakAll.com facere mollitia repellat hic, officiis, consequatur quam ad cumque dolorem doloribus ex magni necessitatibus, nisi accusantium.</p>
<p>Voluptatibus atque inventore http://www.looooooooooooooooooooooooooooongURL.com veritatis exercitationem nihil minus omnis, quisquam earum ipsum magnam. Animi ad autem quos rem provident minus officia vel beatae fugiat quasi, dignissimos
sapiente sint quam voluptas repellat!</p>
</div>
Just be sure of applying this only to the link. Otherwise, all other words will break too. :)
Try playing with the white-space CSS property.
Check this link for more info: http://perishablepress.com/press/2010/06/01/wrapping-content/
I believe what you're looking for are soft hyphens. This was covered by ALA a while back.
http://www.alistapart.com/articles/the-look-that-says-book/
I know this is old post but since I ended up here with a related google search - someone else might also.
I needed to make a long url breakable, and since wasn't usable for my site (i.e not in html5 standards, and ie8 seems to ignore it)
<style>.wbr { display: inline-block; width: 0px;}</style>
Since i generated the url I was able to insert <span class="wbr"> </span> before the slashes.
So I ended up with :
www.example.com<span class="wbr"> </span>/somepath<span class="wbr"> </span>/blah.php
which looks normal in the browser but allows from word wraping at the / marks
www.example.com/somepath/blah.php
Hope that helps the next person who visits