overflow hidden won't cut text - html

I have the following html and css
<div id="car-76" class="thumbnail_car thumbnail span2">
<div class="thumbnail_creator">
<hr>
<div class="creator_img">
<img alt="Bob Smith" height="40x40" src="http://www.gravatar.com/avatar/df61dcc6eec08cb7d62f1959b89ae843?s=40&d=identicon&r=PG" width="40x40">
</div>
<div class="creator_details"> <a href="/users/2" title="John Malkovitchlongname the 3rd">
John Malkovitchlongname the 3rd
</a>
</div>
<div class="creator_followers"> <i class=" icon-eye-open" title="Followers"> </i> 0</div>
<div class="thumbnail_follow" id="follow_btn-2"> <a class="btn btn-primary" data-method="post" data-remote="true" rel="nofollow">Follow</a>
</div>
</div>
</div>
the relevant css is
.thumbnail_creator .creator_details {
display: inline-block;
font-size: 77%;
position: absolute;
left: 44px;
overflow: hidden;
text-overflow: clip;
}
I'd like long names to be cut if it reaches the end of the div, and not enter a new line
and for some reason doing overflow: hidden to hide the text and text-overflow: clip to clip the text won't do anything
so, instead of:
I want it to be (after editting the name to achieve the results)
fiddle here

You could try adding:
white-space:nowrap;
and setting some width on the content, since you have a fixed thumbnail width, this shouldn't be an issue, right?
see DEMO
Hope it helps ^_^
Update:
before I missed your fiddle, so I made the one for my demo. Here is a demo with your fiddle updated. Here I also added allipsis to check out =)

Also try and set the max-width css property of the .thumbnail_creator .creator_details divs.

Related

Position an HTML element right under another as opposed to positioned to the right or left

I have the following div styled and ready:
everything is working according to plan EXCEPT the "like" button, which I have as a div with the current css (to ease in seeing the border, I have also added a green border for debugging):
.article-likes {
margin-right: 16px;
float: bottom;
bottom: 8px;
left: 5px;
border: 3px solid #73AD21;
}
and this is the html for the entire div.
<article class="media content-section">
<img class="rounded-circle article-img" src="/static/profile_pics/b1775e70284ad2de-1.png">
<!--- THE ELEMENT I AM TRYING TO MOVE IS DIRECTLY BELOW THIS LINE::::: --->
<div class="article-likes"><a class="btn btn-success btn-xs" href="">like</a></div>
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="/user/1">1</a>
<small class="text-muted">(me) July 18, 2020 - 04:16 AM</small>
<div style="float:right;" class="mr-2">
<a type="button" class="btn btn-secondary btn-xs" href="/post/3">view</a>
</div>
</div>
<h2><a class="article-title" href="/post/3">demo post</a></h2>
<p class="article-content">demo post sorry</p>
</div>
</article>
I am trying to get the like button positioned directly under (and slightly offset to the left) of the user image (profile picture). I have tried float:bottom; but this does not seem to stick the image to the bottom of the post. I have also tried adding margins but those end up messing the other elements in the article tag.
Here is an example of what I am trying to achieve (inside red rectangle is optimal placement):
If you use bootstrap you can simply wrap your image and like button inside <div class="col"></div>
and Voila! you have a column of contents, very simple.
Dude, I gotta say, your code is totally messed up. For God's sake, don't use such lengthy class names for such a simple code. And as I can see, you don't have basic knowledge about floating a div. Anyways, here is you answer. Just remove your css code and paste mine.
.article-likes {
width: 100px;
height: 50px;
border: 1px solid green;
}

Position well having another well in center of parent container

In my HTML page, I have a well, in which there is another well. The outer well should be in the center of the page, and the inner well in the center of the outer well. My code is given below:
<div id="container">
<div class="col-md-10"></div>
<div class="well col-md-10">
<p> Office name <span class="right-float">Your desk: <span id="desk-id">not set</span> </span></p>
<hr>
<div class="well col-md-6" align="center">
<p> <span class="glyphicon glyphicon-info-sign"></span>
Start your work by setting a name for your Desk</p>
</div>
</div>
<div class="col-md-10"></div>
</div>
It doesn't work; each well appears on the left-side of its respective parent. Does anyone know how I could position them centrally? Thanks in advance!!
Here's my CSS:
hr {
border-color : #474343;
}
.header-dimensions {
width: 110px;
height: 50px;
}
.logoname-dimensions {
display: inline;
width: 115px;
height: 40px;
}
.navbar-pad:{
padding: 0;
}
.right-float{
float: right;
}
What you are trying to do is kind of working against itself.
First off you apply the well class to the same element as the col-md-* element. This results in the whole element floating to the left (from the col-md-* class). You have to make sure that float is overridden in your own code.
Second, you can't use align="center" to center box elements. It works on text, but I think most people would recommend you to keep the centering in the CSS instead of the HTML.
So when you overridden the float and removed the align attribute I suggest you set a new class on both elements that should be centered and add margin: 0 auto; to that class.
Here is a pen that show how it could be done. The align="center" is removed and I've added the class well__centered to the elements. Check the CSS for the styling.

How to show the ellipsis when it reach the maximum space of the container

I know how to use text-overflow ellipsis at the when I have only want to show one line text. like this
which I simply use
<div style="height: 36px;overflow: hidden;text-overflow: ellipsis;
white-space: nowrap;
width: 246px;
">
<a>Kesong Xie: </a>
<span class="">This place i have been to before, and it has a nice sunset and a beautiful beach :)</span>
</div>
However, the text get truncated when it reaches the end of the first line, while the outside container still gets plenty of space , what I want is something like this:
It's possible to do this?
You can use some trickery with the ::after pseudo element
.clip-text{
position: relative;
}
.clip-text::after{
position:absolute;
right:-1px;
bottom:0;
content:"..."
}
<div class="clip-text" style="height: 36px;overflow: hidden;text-overflow: ellipsis;
width: 246px;
">
<a>Kesong Xie: </a>
<span class="">This place i have been to before, and it has a nice sunset and a beautiful beach :)</span>
</div>
No, this is not possible with CSS. You will have to split the lines into different elements, or use Javascript to achieve that.

align two divs based on length of first one

I need to align the second div based on the length of first one. The first div contains some content like article title and user details. The second div contains rating for that title. I have assigned float property for both divs. This works fine if the content inside first div is not too long. But if the title is too long then the title overlaps the rating.
Please let me know if there is some way to fix it.
<div id="result-1095" class="selectedResource">
<div style="float:left;width:67%;">
<p>
<a class="details" id="resource-1095" href="#id:resource1095">
TestTitleTestTitleTestTitleTestTitleTestTitleTestTitleTestTitleTestTitletest tests tests test testst
</a>
</p>
<p class="articleDetails"></p>
<p class="userDetails">Added by username</p>
</div>
<div style="float:right;" class="yui3-widget component rating" id="ResourceRating-1095">
<span class="rating-content">
<span class="rating-label"></span>
<a onclick="return false;" title="one" class="icon-star-empty"></a>
<a onclick="return false;" title="two" class="icon-star-empty"></a>
<a onclick="return false;" title="three" class="icon-star-empty"></a>
<a onclick="return false;" title="four" class="icon-star-empty"></a>
<a onclick="return false;" title="five" class="icon-star-empty"></a>
</span></div>
<p style="clear:both"></p>
</div>
I have added a fiddle snippet. Somehow yui rating is not visible in fiddle (though i have loaded yui on frameworks ) http://jsfiddle.net/wkj926rq/
You can use word-wrap: break-word for class details
.details{
word-wrap: break-word
}
http://www.css3.com/css-word-wrap/
on other way changing mark up-
You can use display:inline-block; for your divs instead of float;
<div>
<div class="first inlineblock">
</div>
<div class="second inlineblock">
</div>
<div>
css
.inlineblock
{
display:inline-block;
vertical-align:top;
}
Please add the same class on markup ex: .same-width and set width property
You could use flexboxes setting container to:
.wrapper , #result-1095{
display: flex;
flex-flow: nowrap;
}
PS: if you paste a fiddle(snippet) it's more testable
Maybe you should try giving width to the the title (class="details").

How to position two elements on the one line in HTML

Here is my problem:
I need to put this number over"...".
Here is the HTML code:
<div class=" unread-object">
<div style="overflow: hidden; text-overflow: ellipsis;">
<a class="k-link nowrappable outdate-object" href="#/view/19260">
л ьотрипмасвчувсапмдгбыцячшльогтрнамам ам маугшпгнплрплроsdsds
</a>
<span class="unread-count" style="font-weight:normal; font-size:9px; color:rgb(161,187,206);float:right;">[3]</span>
</div>
</div>
float:right and left doesnt work. But, when I stretch fully slider:
use display:inline-block
<a class="k-link nowrappable outdate-object" href="#/view/19260" style="display:inline-block;">л ьотрипмасвчувсапмдгбыцячшльогтрнамам ам маугшпгнплрплроsdsds</a>
<span class="unread-count" style="font-weight:normal; font-size:9px; color:rgb(161,187,206); display:inline-block;">[3]</span>
I think this will solve your issue.
jsFiddle Link
When the width of the block does not align the two elements, the right will float line.
Simple solution is to use position:absolute;
In my example
I placed position:relative for the second div
<div style="overflow: hidden;position:relative; text-overflow: ellipsis;">
where you have content and the span with unread-count it's placed with position absolute;
.unread-object .unread-count{
position:absolute;
right:0px;
top:0px
}