html - How can I use the exact width of wrapped text rather than that of the full container? -


i have text constrained particular width, wraps. want display border around wrapped text. when add border, wraps text plus unused space around it. there way apply border just text? here's illustration of mean: have drawn red line want right-hand edge of element be:

enter image description here

html:

  <div>     supercalifragilistic expialidocious   </div>

css:

div {   max-width: 200px;   display: inline-block;   border: 1px solid black; }

jsfiddle

could work short text. combining attr() , pseudo.

.outer {    width: 200px;    background-color: #ccc;      border: 1px solid black;    display: inline-block;  }  .inner {          display: inline;    position:relative;  }  .inner:before {    content: attr(data-text) " ";    color: transparent;    position: absolute;    left:0;top:0;    border: 1px solid red;    pointer-events: none;  }
<div class="outer">    <div class="inner" data-text="supercalifragilistic expialidocious">supercalifragilistic expialidocious</div>  </div>

edit: absolute positioning inside inline elements & limitations of above example.

from css2.1 specs 10.1.4: if element absolute positioned inside inline element spanning multiple lines, containing block undefined.

by defining top , left positions,we browsers align pseudo corresponding top , left edges of first box created 'ancestor'. definition, pseudo virtual child of selected element , absolute looks nearest positioned ancestor. though inline rule points no containing block, position rule works in favour top/left sides.

we allow pseudo take height computed content/intrinsic dimension. since attr() pulls same content, more or less overlaps on text in ancestor. (when without font inconsistencies).

but note, while may work single line text dependent on white-space/wrap/font , not consistent across browsers when dealing multi-line inline elements.

here mean.

.outer {    width: 200px;    background-color: #ccc;    border: 1px solid black;    margin-bottom: 30px;    font-family: monospace;  }  .inner {    color: black;    position: relative;  }  .inner:after {    content: attr(data-text) " ";      position: absolute;    left:-1px;top:-1px;right:-1px; /* compensating border */    pointer-events: none;    color: transparent;    border: 1px solid red;  }
<div class="outer"><span class="inner" data-text="single line inline">single line inline</span></div><div class="outer"><span class="inner" data-text="this multi-line inline element may not hold absolute positioned pseudo element. fails in chrome.">this multi-line inline element may not hold absolute positioned pseudo element. fails in chrome.</span></div>


-

Comments

Post a Comment

Popular posts from this blog

serialization - Convert Any type in scala to Array[Byte] and back -

i have following question: i have variable value in program declared value. i want convert value byte array.. how can serialize byte array , back? found examples related other types such double or int, not any. this should need. it's pretty similar how 1 in java. import java.io.{bytearrayinputstream, bytearrayoutputstream, objectinputstream, objectoutputstream} object serialization extends app { def serialise(value: any): array[byte] = { val stream: bytearrayoutputstream = new bytearrayoutputstream() val oos = new objectoutputstream(stream) oos.writeobject(value) oos.close stream.tobytearray } def deserialise(bytes: array[byte]): = { val ois = new objectinputstream(new bytearrayinputstream(bytes)) val value = ois.readobject ois.close value } println(deserialise(serialise("my test"))) println(deserialise(serialise(list(1)))) println(deserialise(serialise(map(1 -> 2)))) println(deserialise(seri
Read more

matplotlib support failed in PyCharm on OSX -

any idea how fix ? how can debug might problem ? not seem : https://youtrack.jetbrains.com/issue/py-15520 i in console: python 2.6.9 (unknown, jul 14 2015, 19:46:31) [gcc 4.2.1 compatible apple llvm 6.0 (clang-600.0.39)] on darwin >>> import matplotlib.pyplot plt matplotlib support failed the backend : >>> import matplotlib >>> print(matplotlib.rcparams['backend']) macosx
Read more

python - Matplotlib: TypeError: 'AxesSubplot' object is not callable -

i new programming please pardon me if rookie mistake. i writing python script have defined functions create subplots of distributions. i have slider widget end user change value of variables(mu , sigma) , see effect on distribution. here's code import numpy np print np.__version__ import scipy print scipy.__version__ scipy.stats import norm, lognorm, uniform import matplotlib print matplotlib.__version__ import matplotlib.pyplot plt matplotlib.widgets import slider, button, radiobuttons, checkbuttons #####calculating mean , standard deviation##### global mu_a1 mu_a1 = 1 global mu_b1 mu_b1 = 10 global mu_c1 mu_c1 = -13 global sigma_a1 sigma_a1 = 0.14 global sigma_b1 sigma_b1 = 1.16 global sigma_c1 sigma_c1 = 2.87 mu_x01 = -11 sigma_x01 = 1.9 #####_____##### #####generating random data##### a1 = 0.75*mu_a1 + (1.25 - 0.75)*sigma_a1*np.random.sample(10000) b1 = 8*mu_b1 + (12 - 8)*sigma_b1*np.random.sample(10000) c1 = -12*mu_c1 + 2*sigma_c1*np.random.sample(10000)
Read more