CSS අන්තර්ගතය භාවිතා කරමින් HTML ආයතන එකතු කිරීම

1023

HTML ආයතන එක් කිරීමට ඔබ CSS content දේපල භාවිතා කරන්නේ කෙසේද ?

මේ වගේ දෙයක් භාවිතා කිරීමෙන්  බිඳී නොයන අවකාශය වෙනුවට තිරයට මුද්‍රණය වේ:

.breadcrumbs a:before {
    content: '&nbsp;';
}

— nickf
source

5

වෙනත් අර්ථයකින් ගත් කල, CSS භාවිතා කරමින් අන්තර්ගතය එකතු කිරීම උත්සුකයන් වෙන් කිරීම උල්ලං lates නය කරයි, CSS යන්නෙන් අදහස් කරන්නේ ශෛලියේ අර්ථ දැක්වීම් සඳහා පමණි. CSS අක්‍රීය කිරීමෙන් සමස්ත සලකුණ ඉහළට ඔසවන බැවින් ප්‍රවේශවීමේ දෘෂ්ටි කෝණයෙන් වැළකී සිටීම වඩාත් සුදුසුය. කෙසේ වෙතත්, මෙම තාක්ෂණය භාවිතා කරමින් රූප එකතු කිරීම සතුටක්.

— quzen

96

එය රඳා පවතියි. මෙම අවස්ථාවේදී එය ඉදිරිපත් කිරීමේ අරමුණු සඳහා ය. එය ">" html

— mathieu

2

ප්‍රශ්නයක් පමණක් නම්, එය ඇණවුම් ලැයිස්තුවක් ලෙස වඩා හොඳ යැයි ඔබ සිතනවාද? මම කිව්වේ, එය ඇණවුමක් සහිත ලැයිස්තුවක් නේද?

— ඇලෙක්ස්

3

estquestzen - මම හිතන්නේ CSS :afterසැකසීමට පරිපූර්ණ ලෙස පිළිගත හැකි (සහ හොඳ ස්වරූපයක්) , උදාහරණයක් ලෙස, වර්ග කළ තීරුවක asc / desc වර්ග කිරීමේ දර්ශකය.

— ජොෂ් එම්.

9

SoC මූලධර්මය ගැන මිනිසුන් පිස්සු වැටී ඇති බව මම දුටුවෙමි. ස්වර්ගය, ඔබ සඳහා ">" ලකුණක් වන්නේ කුමන ආකාරයේ අන්තර්ගතයක්ද?! අනුකම්පා කරන්න! එය මෙම සන්දර්භය තුළ අයිකනයක් පමණි, විජට් එකක්, උණ්ඩයක්, ඔබ එය නම් කරන්න. මට අන්තර්ගතය යනු මා සෙවිය යුතු දෙයකි.

— user776686

1075

ඔබ පැන ගිය යුනිකෝඩ් භාවිතා කළ යුතුය:

මෙන්

.breadcrumbs a:before {
    content: '\0000a0';
}

වැඩි විස්තර: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

— mathieu
source

58

ප්‍රමුඛ ශුන්‍යයන් අතිරික්තය, CSS 2.1: 4.3.7 නූල් බලන්න . '>\a0'ප්‍රමාණවත්.

— PointedEars

19

ladlamblin තවද, ගැලවීමේ අනුක්‍රමයේ කොටසක් ලෙස අක්‍ෂර විශ්වාසදායක ලෙස අර්ථ නිරූපණය නොකිරීමට , සම්මත සුදු අවකාශය එක් කරන්න: '>\a0 bc'දර්ශනය > bcවේ.

— PointedEars

19

මගේ මෙවලම amp-what.com/#q=%3E "CSS" මාදිලියක් සපයයි. පිටුවේ පතුලේ ඇති "css" තෝරන්න. ඉහත CSS යොමුවකට අනුව, මේවා අපැහැදිලි වන විට අවකාශය වෙන් කළ යුතුය.

— ndp

athmathieu ඒ වෙනුවට රූපය එකතු කිරීමට ඔබට 'අන්තර්ගතය' භාවිතා කළ හැකිද? මේ පුදුමෙන්

— සැලසුම් weia

1

D ඇඩම්, නැත, ඔබට රූපයක් එකතු කිරීමට අවශ්‍ය නම්, "පසුබිම්-රූපය" භාවිතා කර දර්ශනය කරන්න: ඉන්ලයින්-බ්ලොක්; සහ පළල: 123px; උස: 123px; (නිශ්චිත පළල / උස භාවිතා කරන්න)

— නේතන් ජේබී

179

CSS යනු HTML නොවේ.  යනු HTML හි නම් කරන ලද අක්ෂර යොමු කිරීමකි ; දශම සංඛ්‍යාත්මක අක්ෂර යොමුවකට සමාන වේ  . 160 යනු යුනිකෝඩ් හි අක්‍ෂරයේ දශම කේත ලක්ෂ්‍යයයි (හෝ UCS-2 ; HTML 4.01 පිරිවිතර බලන්න ). එම කේත ලක්ෂ්‍යයේ ෂඩාස්රාකාර නිරූපණය U + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰ ) වේ. යුනිකෝඩ් කේත ප්‍රස්ථාර සහ අක්‍ෂර දත්ත ගබඩාවේ එය ඔබට හමුවනු ඇත.NO-BREAK SPACE

CSS හි ඔබ එවැනි අක්ෂර සඳහා යුනිකෝඩ් ගැලවීමේ අනුක්‍රමයක් භාවිතා කළ යුතුය, එය චරිතයක කේත ලක්ෂ්‍යයේ ෂඩාස්රාකාර අගය මත පදනම් වේ. එබැවින් ඔබ ලිවිය යුතුය

.breadcrumbs a:before {
  content: '\a0';
}

ගැලවීමේ අනුක්‍රමය අවසන් වරට නූල් අගයකින් පැමිණෙන තාක් කල් මෙය ක්‍රියාත්මක වේ. අක්ෂර අනුගමනය කරන්නේ නම්, වැරදි අර්ථ නිරූපණයෙන් වැළකී සිටීමට ක්‍රම දෙකක් තිබේ:

a) (වෙනත් අය විසින් සඳහන් කර ඇත) ගැලවීමේ අනුක්‍රමය සඳහා හරියටම ෂඩාස්රාකාර ඉලක්කම් හයක් භාවිතා කරන්න:

.breadcrumbs a:before {
  content: '\0000a0foo';
}

ආ) ගැලවීමේ අනුක්‍රමයෙන් පසු එක් සුදු අවකාශයක් (උදා: අවකාශය) අක්ෂරයක් එක් කරන්න:

.breadcrumbs a:before {
  content: '\a0 foo';
}

( ෂඩාස්රාකාර fඉලක්කම් බැවින්, \a0fවෙනත් ආකාරයකින් GURMUKHI LETTER EEමෙහි අර්ථය වනු ඇත, හෝ you ඔබට සුදුසු අකුරු තිබේ නම්.)

පරිසීමිත සුදු අවකාශය නොසලකා හරිනු ඇති අතර, මෙය දර්ශනය වනු ඇත foo, මෙහි පෙන්වන අවකාශය NO-BREAK SPACEඅක්ෂරයක් වනු ඇත .

සුදු-අභ්‍යවකාශ ප්‍රවේශය ( '\a0 foo') ඉලක්කම් හයේ ප්‍රවේශයට වඩා පහත සඳහන් වාසි ඇත ( '\0000a0foo'):

ප්‍රමුඛ ශුන්‍යයන් අවශ්‍ය නොවන අතර ඉලක්කම් ගණන් කිරීම අවශ්‍ය නොවන නිසා එය ටයිප් කිරීම පහසුය ;
එය කියවීමට පහසු පලා අනුක්රමය සහ පහත දැක්වෙන පෙළ අතර සුදු-අවකාශය ඇති බැවින්, සහ ඉලක්කම් ගණන් කළ යුතු නැත;
එය අඩු ඉඩක් අවශ්ය ප්රමුඛ zeroes අවශ්ය නොවන නිසා,;
අනාගතයේදී U + 10FFFF වලින් ඔබ්බට යුනිකෝඩ් සහය දක්වන කේත ලකුණු සඳහා CSS පිරිවිතර වෙනස් කිරීම අවශ්‍ය වන හෙයින් එය ඉහළට අනුකූල වේ.

මේ අනුව, ගැලවී ගිය අක්ෂරයකින් පසු අවකාශයක් පෙන්වීමට , ස්ටයිල්ෂීට් එකේ අවකාශ දෙකක් භාවිතා කරන්න -

.breadcrumbs a:before {
  content: '\a0  foo';
}

- හෝ එය පැහැදිලි කරන්න:

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

විස්තර සඳහා CSS 2.1, "4.1.3 අක්ෂර සහ නඩුව" බලන්න.

— පොයින්ට් ඊර්ස්
source

"ගැලවී ගිය අක්ෂරයකින් පසු අවකාශයක් පෙන්වීම සඳහා" +1, නමුත් සඳහන් කළ යුතුව ඇත්තේ nbsp එකක් එකතු කිරීමෙන් පසුව අවකාශයක් යම් ආකාරයක nbsp හි පරමාර්ථය පරාජය කරන බවයි;)

— TWiStErRob

WTWiStErRob නැත, නොබිඳිය හැකි අභ්‍යවකාශ අක්ෂරයක එකතුවක් හා පසුව බිඳෙන අවකාශ අක්ෂරයක් (හෝ අනෙක් අතට) අභ්‍යවකාශ අක්ෂර දෙකක පළල පිළිබඳ පරතරයක් පෙන්වනු ඇති අතර වාචික අභ්‍යවකාශ අක්ෂර දෙකක් හෝ වැඩි ගණනක් පෙන්වන්නේ පරතරය පමණි. CSS දේපල වෙනත් ආකාරයකින් ප්‍රකාශ නොකරන්නේ නම්, පිරිසැලසුම් එන්ජිමේ විග්‍රහකය ලෙස එක් අභ්‍යවකාශ අක්ෂරයක පළල අඛණ්ඩව බිඳෙන සුදු අවකාශය (නව රේඛාව ඇතුළුව) එක් අභ්‍යවකාශ අක්ෂරයකට කඩා වැටේ . white-space

— PointedEars

ඔව්, බිඳවැටීම ගැන මම දනිමි, නමුත් nbsp හි කාරණය නම් එය කැඩී නොයෑම, වචන අක්ෂර පෙරනිමියෙන් කැඩී නොයෑමයි, එබැවින් කැඩී නොයන තැනකට යාබදව අවකාශයක් එක් කිරීම තේරුමක් නැති දෙයක් වන අතර අවසාන ප්‍රති result ලය වනු ඇත බිඳීම. මම කතා කරන්නේ white-space: normal.

— TWiStErRob

WTWiStErRob කරුණාකර මගේ පිළිතුර වඩාත් ප්‍රවේශමෙන් කියවන්න. එය “පැන ගිය අක්ෂරයකට පසු අවකාශයක් පෙන්වීම” සඳහා උදාහරණයකි . මුල් කේතයට NO-BREAK SPACEඅක්ෂරයක් තිබුන නිසා මම ඒ සඳහා ගැලවීමේ අනුක්‍රමය භාවිතා කළෙමි. ඔබට වෙනත් ගැලවීමේ අනුක්‍රමයක් තෝරා ගත හැකිය; අවශ්‍ය නම් ඔබටත් ප්‍රකාශ කළ හැකිය white-space: nowrap.

— PointedEars

83

යාවත්කාලීන කිරීම : සියළුම සීඑස්එස් අවස්ථාවන්හි නිවැරදි ස්ථාවරය ඇඟවුම් කරන්නේ අවකාශය හෙක්ස් නූලට ටර්මිනේටරයක් වන  අතර
'\a0 'එයින් ගැලවී ගිය අනුක්‍රමය මගින් අවශෝෂණය කර ගන්නා බවයි. මා විසින් විස්තර කරන ලද සහ පහත සවි කර ඇති ගැටලුවට හොඳ විසඳුමක් සේ පෙනෙන මෙම බලයලත් විස්තරය ඔහු තවදුරටත් පෙන්වා දුන්නේය .

ඔබ කළ යුත්තේ පැන ගිය යුනිකෝඩ් භාවිතා කිරීමයි. ඔබට පවසා ඇති දේ CSS තුළ \00a0පරිපූර්ණ ස්ථාවරයක් නොවේ  ; එබැවින් උත්සාහ කරන්න:

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No&nbsp;Break as opposed to below */

\0000a0ලෙස භාවිතා කිරීම  . ඔබ උත්සාහ කරන්නේ නම්, මැතිව් සහ මිලිකින් යෝජනා කළ පරිදි:

content:'No\00a0Break'   /* becomes No&#2571;reak */

එය බී හෙක්ස් ගැලවී ගිය අක්ෂර වලට ගෙන යයි. 0-9a-fA-F සමඟ ද එය සිදු වේ.

— dlamblin
source

6

නියම කර ඇති පරිදි, ගැලවීමේ අනුක්‍රමයෙන් පසුව ඔබට ඉඩක් තැබිය යුතුය : '\a0 Break'. '\0000a0Break'ය නොවන විශ්වාසනීය.

— පොයින්ට් ඊර්ස්

Ointed පොයින්ට් ඊර්ස් සිත්ගන්නා සුළුය, එබැවින් මෙම අවකාශය ටර්මිනේටරයක් වන අතර එය නූලට ඇතුළත් නොවේද?

— dlamblin

2

බලන්න කොටසක් "4.1.3 අක්ෂර සහ නඩුව", CSS 2.1 . CSS 2.1 අනුව ඔබේ ප්‍රවේශය විශ්වාසදායක විය යුතු බව ද එයින් පෙන්වයි. නමුත් වයිට්ස්පේස් ප්රවේශ පිරිසිදුකාරකය (ඉහළට-අනුකූල) සහ කුඩා අඩිපාරක් ඇති බව මට පෙනේ.

— PointedEars

49

CSS හි ඔබ HTML ආයතන වෙනුවට යුනිකෝඩ් ගැලවීමේ අනුක්‍රමයක් භාවිතා කළ යුතුය. මෙය චරිතයක ෂඩාස්රාකාර අගය මත පදනම් වේ.

සංකේතය ඒවායේ ෂඩාස්රාකාර සමාන බවට පරිවර්තනය කිරීමේ පහසුම ක්‍රමය found ( ▾) සිට \25BEමයික්‍රොසොෆ්ට් කැල්කියුලේටරය =) වැනි බව මම සොයා ගතිමි.

ඔව්. ක්‍රමලේඛක මාදිලිය සක්‍රිය කරන්න, දශම පද්ධතිය සක්‍රිය කරන්න, ඇතුලත් කරන්න 9662, ඉන්පසු හෙක්ස් වෙත මාරු වන්න , එවිට ඔබට ලැබෙනු 25BEඇත. ඉන්පසු \ආරම්භයට බැක්ස්ලෑෂ් එකක් එක් කරන්න .

— netgoblin
source

4

මුළුමනින්ම ප්‍රයෝජනවත් වුවත්, එය ඇත්ත වශයෙන්ම ප්‍රශ්නයට පිළිතුරු නොදෙන බැවින් ප්‍රශ්නයට අදහස් දැක්වීමක් ලෙස මෙය වඩා හොඳ වනු ඇත.

— dlamblin

1

කළු දකුණට යොමු කරන කුඩා ඊතලය (▸ \25B8 ▸ ▸) ftw. වැඩි විස්තර සඳහා en.wikipedia.org/wiki/Geometric_Shapes බලන්න .

— ජොයෙල් පුර

2 ජොයෙල් පුර, වැඩි වේලාවක් විකිය කියවන්න. ඔබ සංකේත වැරදියට තේරුම් ගත්තා.

— නෙට්ගොබ්ලින්

@netgoblin: කොහොමද? මම දකුණට යොමු කරන කුඩා ඊතලයට කැමතියි.

— ජොයෙල් පුර

1

මම මේ graphemica.com භාවිතා කරමි, එහිදී ඔබට දශම, හෙක්සැඩිසිමල් සහ වෙනත් දේ ලබා ගත හැකිය

— මයික්

34

නොබිඳිය හැකි ඉඩක් සඳහා හෙක්ස් කේතය භාවිතා කරන්න. මේ වගේ දෙයක්:

.breadcrumbs a:before {
    content: '>\00a0';
}

— ජෝන් මිලිකින්
source

17

nbspවිවෘත චාර්මැප් ඇලවීම සහ 160 අක්ෂර පිටපත් කිරීම සඳහා ක්‍රමයක් තිබේ . කෙසේ වෙතත්, මේ අවස්ථාවේ දී මම බොහෝ විට මේ ආකාරයට පෑඩින් කිරීම සඳහා ඉඩ තබමි:

.breadcrumbs a:before { content: '>'; padding-right: .5em; }

ඔබට යමඟ display:inline-blockහෝ වෙනත් යමක් සැකසීමට අවශ්‍ය විය හැකිය .

— එඩිතරයි
source

4

එන්බීඑස්පී පේස්ට් කරනවා වෙනුවට, මම වස්තුවක් භාවිතා කිරීමට ඇලී සිටිමි, එවිට අනාගත නඩත්තුකරුවන්ට එය අවකාශයකට වෙනස් බව පැහැදිලි වේ.

— nickf

2

අනෙක් අතට, ඔබ යමඟ විය යුතු යැයි සිතන ආකාරයට නොකරන්න, එනම්: සංකේතය පාන් කෑල්ල සමඟ සමපාත විය යුතු අතර දෘශ්‍ය ශෛලියක් පමණක් නොවේ. අවම වශයෙන් ඔබට ගූගල් විසින් ඔබේ යමඟ දැක බලා ඒවා සෙවුම් යන්ත්‍රයේ ලැයිස්තුගත කිරීම යටතේ ලැයිස්තු ගත කිරීමට අවශ්‍ය නම්.

— ඩිමෙන්ටික්

10

උදාහරණයක් වශයෙන් :

http://character-code.com/arrows-html-codes.php

උදාහරණය: ඔබට ඔබේ චරිතය තෝරා ගැනීමට අවශ්‍ය නම්, මම "& # 8620" "සහ # x21ac" තෝරා ගත්තෙමු (අපි HEX අගයන් භාවිතා කරමු )

.breadcrumbs a:before {
    content: '\0021ac';
}

ප්‍රති ult ලය:

ඒක තමයි :)

— ෆර්හාට් කෝසර්
source

මම අන්තර්ගතය භාවිතා කළෙමි: '\ 10095'; . නමුත් ප්‍රතිදානය පෙන්වන්නේ නැත. නිරූපකය වෙනුවට එය සෘජුකෝණාස්රය පෙන්වයි.

— කපිල්

0

මෙය ඉතා පැරණි පෝස්ට් එකක් බව මම දනිමි, නමුත් පරතරය ඔබගේ පසු නම්, ඇයි සරලවම:

.breadcrumbs a::before {
    content: '>';
    margin-left: 8px;
    margin-right: 8px;
}

මම මීට පෙර මෙම ක්‍රමය භාවිතා කර ඇත්තෙමි. එය මගේ පරීක්ෂණයේදී ">" සමඟ අනෙක් රේඛාවලට හොඳින් ගැලපේ.

— බ්‍රයන්-වෙල්ච්
source

-2

මෙන්න ක්‍රම දෙකක්:

HTML හි:

<div class="ics">⛱</div>

මෙහි ප්‍රති result ලය into බවට පත්වේ

Css හි:

.ics::before {content: "\9969;"}

HTML කේතය සමඟ <div class="ics"></div>

මෙය ද in හි ප්‍රති results ලයකි

— තාරන්දීප් සිං
source

නිවැරදි පිළිතුර .ics :: පෙර {අන්තර්ගතයට: '\ 9969';}

— මාකෝ ස්කාර්නැටෝ