CSS અને HTML નો ઉપયોગ કરીને સ્ક્રોલિંગ ટેક્સ્ટ સાથે એક બૉક્સ બનાવો
એક એચટીએમએલ સ્ક્રોલ બૉક્સ એક બૉક્સ છે જે બૉક્સના પરિમાણો કરતા બૉક્સની સામગ્રી મોટા હોય ત્યારે જમણી બાજુ અને નીચે સ્ક્રોલ બારને ઉમેરે છે. બીજા શબ્દોમાં કહીએ તો, જો તમારી પાસે એક બૉક્સ છે જે લગભગ 50 શબ્દોમાં ફિટ થઈ શકે છે, અને તમારી પાસે 200 શબ્દોનો ટેક્સ્ટ છે, તો એક એચટીએમએલ સ્ક્રોલ બૉક્સ તમને વધારાની 150 શબ્દો જોવા દોશે. પ્રમાણભૂત HTML માં તે બૉક્સની બહારના વધારાના ટેક્સ્ટને ફક્ત દબાણ કરશે.
એચટીએમએલ સ્ક્રોલ બનાવવાનું એકદમ સરળ છે. તમે સ્ક્રોલ કરવા માંગો છો તે તત્વની પહોળાઈ અને ઊંચાઈને સેટ કરવાની જરૂર છે અને પછી તમે સ્ક્રોલિંગને કેવી રીતે થવું હોય તે સેટ કરવા માટે CSS ઓવરફ્લો ગુણધર્મનો ઉપયોગ કરો.
વિશેષ લખાણ સાથે શું કરવું?
જ્યારે તમારા લેઆઉટ પરના સ્થાનમાં ફિટ થઈ જશે તેના કરતાં વધુ ટેક્સ્ટ હોય, તો તમારી પાસે થોડા વિકલ્પો છે:
- ટેક્સ્ટ ફરીથી લખો જેથી તે ટૂંકા હોય અને ફિટ થશે.
- ટેક્સ્ટને સીમાથી આગળ વધવાની અનુમતિ આપો અને આશા રાખીએ કે લેઆઉટ તેનો આધાર આપવા માટે ફ્લેક્સ કરી શકે છે.
- ટેક્સ્ટ દૂર કરો જ્યાં તે ઓવરફ્લો થાય.
- સ્ક્રોલ બારને ઉમેરો (સામાન્ય રીતે ટેક્સ્ટ માટે ઊભી છે) જેથી જગ્યા સ્ક્રોલ વધારાની ટેક્સ્ટ બતાવવા માટે.
શ્રેષ્ઠ વિકલ્પ સામાન્ય રીતે અંતિમ વિકલ્પ છે: સ્ક્રોલિંગ ટેક્સ્ટ બૉક્સ બનાવો. પછી વધારાની ટેક્સ્ટ હજુ પણ વાંચી શકાય છે, પરંતુ તમારી ડિઝાઇન સાથે ચેડા નથી.
આ માટે HTML અને CSS હશે:
ઓવરફ્લો: ઓટો; બ્રાઉઝરને સરકાવનારની સરહદોને ઓવરફ્લોંગમાંથી રાખવા માટે જો જરૂરી હોય તો સ્ક્રોલ બૉક્સ ઉમેરે છે. પરંતુ આ કામ કરવા માટે ક્રમમાં, તમે પણ DIV પર સેટ પહોળાઈ અને ઊંચાઈ શૈલી ગુણધર્મો જરૂર છે, જેથી ઓવરફ્લો સીમાઓ છે કે જેથી.
ઓવરફ્લો બદલીને તમે ટેક્સ્ટને કાપી પણ શકો છો: ઑટો; ઓવરફ્લો: છુપાયેલ;. જો તમે ઓવરફ્લો પ્રોપર્ટી છોડી દો છો, તો ટેક્સ્ટ DIV ની સીમાઓ ઉપર ફેલાશે.
તમે માત્ર લખાણ કરતાં વધુ માટે સરક બાર્સ ઉમેરી શકો છો
જો તમારી પાસે મોટી છબી છે જે તમે નાની જગ્યામાં પ્રદર્શિત કરવા માંગતા હોવ, તો તમે તેના જેવી જ સ્ક્રોલ બારને તે જ રીતે ઉમેરી શકો છો જે તમે ટેક્સ્ટ સાથે કરશો.
આ ઉદાહરણમાં, 400x509 છબી 300x300 ફકરાની અંદર છે.
કોષ્ટકો સ્ક્રોલ બાર્સથી લાભ કરી શકે છે
માહિતીના લાંબા કોષ્ટકો ખૂબ જ ઝડપથી વાંચવા માટે ખૂબ જ મુશ્કેલ થઈ શકે છે, પરંતુ તેમને મર્યાદિત કદના એક ભાગમાં મૂકીને ઓવરફ્લો સંપત્તિ ઉમેરીને, તમે ઘણાં બધાં ડેટા સાથે કોષ્ટકો બનાવી શકો છો જે તમારા પૃષ્ઠ પર અતિશય જગ્યા લેતા નથી. .
સૌથી સહેલો રસ્તો ફક્ત છબીઓ અને ટેક્સ્ટની જેમ જ છે, ફક્ત ટેબની આસપાસ એક ડીવીડી ઉમેરો, તે ભાગની પહોળાઈ અને ઊંચાઈ સેટ કરો, અને ઓવરફ્લો ગુણધર્મ ઉમેરો:
જ્યારે તમે આવું કરો ત્યારે એક વસ્તુ બને છે જે આડી સ્ક્રોલ પટ્ટી સામાન્ય રીતે દેખાય છે કારણ કે બ્રાઉઝર ધારે છે કે સ્ક્રોલ બારના ક્રોમ ટેબલને ઓવરલેપ કરી રહ્યાં છે. કોષ્ટકની પહોળાઈને બદલવાથી અને અન્યો માટે આને ઠીક કરવા માટે ઘણી રીતો છે. પરંતુ મારી પ્રિય ફક્ત CSS 3 પ્રોપર્ટી ઓવરફ્લો-એક્સ સાથે આડા સરકાવનાર બંધ કરવાની છે. ફક્ત ઓવરફ્લો-એક્સ ઉમેરો: છુપાયેલ; DIV ને, અને તે આડી સરકપટ્ટી દૂર કરશે. આ ચકાસવા માટે ખાતરી કરો, કારણ કે ત્યાં સામગ્રી કે જે અદૃશ્ય થઈ શકે છે.
ઓવરફ્લો માટે TBODY ટૅગ્સનો ઉપયોગ કરીને ફાયરફોક્સ સપોર્ટ કરે છે
ફાયરફોક્સ બ્રાઉઝરનો એક ખરેખર સરસ લક્ષણ એ છે કે તમે ટેબલ અને થાડ અથવા ટીફેટ જેવા આંતરિક ટેબલ ટૅગ્સ પર ઓવરફ્લો પ્રોપર્ટીનો ઉપયોગ કરી શકો છો. તેનો અર્થ એ કે તમે ટેબલ સામગ્રીઓ પર સ્ક્રોલ બારને સેટ કરી શકો છો, અને હેડર કોષો તેમની ઉપર લંગર રાખતા રહે છે. આ ફક્ત ફાયરફોક્સમાં કામ કરે છે, જે ખૂબ જ ખરાબ છે, પરંતુ તે એક સરસ સુવિધા છે જો તમારા વાચકો માત્ર ફાયરફોક્સનો ઉપયોગ કરે છે હું આનો અર્થ શું છે તે જોવા માટે Firefox માં આ ઉદાહરણ બ્રાઉઝ કરો.
<ટેબલ શૈલી = "પહોળાઈ: 300 પીએક્સ;"> <ધારા>