Given:
.meta-div { box-shadow: 0 0 25px rgba(0, 0, 0, 0.4); border-radius: 0.5em; width: 15rem; } .outer-div { overflow: hidden; background-color: black; color: white; white-space: nowrap; text-align: right; margin-left: 20px; } .inner-div { /* padding-left: 20px; */ float:right; }
<div class="meta-div"> <div class="outer-div"> <div class="inner-div"> 111 + 222 + 333 + 444 + 555 + 666 + 777 + 888 + 999 </div> </div> </div>
with a JS Fiddle link .
I am trying to add a margin-left
to the text and produce the following output:
I need to have the float:right
property since I require the overflowed text to be to the left of the textbox.
I searched online extensively for this problem and found out that one can not add a margin
property to a floating div, and that I should add to its container instead, but I am just really not sure what trick I could use to mimic the picture above.
I tried creating other sub/outer divs (for the inner-div
class) and spreading the properties of float
and margin-left
across them, I also tried adding some relative/absolute
properties, but all in vain. I have been stuck on this for 6 hours.
Does anyone have any tips or ideas ?
You can use border-left
:
.meta-div { box-shadow: 0 0 25px rgba(0, 0, 0, 0.4); border-radius: 0.5em; width: 15rem; } .outer-div { overflow: hidden; background-color: black; color: white; white-space: nowrap; text-align: right; border-left:22px solid black; } .inner-div { /* padding-left: 20px; */ float:right; }
<div class="meta-div"> <div class="outer-div"> <div class="inner-div"> 111 + 222 + 333 + 444 + 555 + 666 + 777 + 888 + 999 </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.