लाइन ब्रेक का उपयोग करते समय HTML तत्वों के बीच व्हाट्सएप को हटाना

Question

मेरे पास लगभग 10 imgएस की एक पंक्ति के साथ एक पृष्ठ है । HTML की पठनीयता के लिए, मैं प्रत्येक imgटैग के बीच एक लाइनब्रेक लगाना चाहता हूं , लेकिन ऐसा करने से छवियों के बीच व्हॉट्सएप का प्रतिपादन होता है, जो मैं नहीं चाहता। क्या मैं उन दोनों के बजाय टैग के बीच में ब्रेक के अलावा कुछ कर सकता हूं?

संपादित करें: यहाँ एक स्क्रीनशॉट है जो मेरे पास अभी तक है। मैं PHP का उपयोग करके यादृच्छिक संयोजनों में प्रदर्शित करने के लिए पुस्तक रीढ़ की छवियों को पसंद करूंगा। यही कारण है कि मुझे अलग imgटैग की आवश्यकता है ।

Comments

यदि आप स्मार्टी का उपयोग कर रहे हैं , तो आप उपयोग कर सकते हैं {strip}। अन्य टेम्पलेट इंजन में समान टैग होने चाहिए।

— उपयोगकर्ता

Answer 1

आप CSS का उपयोग कर सकते हैं। सेटिंग प्रदर्शित करना: ब्लॉक, या फ्लोट: छवियों पर छोड़ दिया गया है, जिससे आप अपनी खुद की रिक्ति को परिभाषित कर सकते हैं और जिस HTML को आप चाहते हैं उसे प्रारूपित कर सकते हैं लेकिन लेआउट को उन तरीकों से प्रभावित करेंगे जो उचित हो सकते हैं या नहीं भी हो सकते हैं।

अन्यथा आप इनलाइन सामग्री के साथ काम कर रहे हैं इसलिए HTML स्वरूपण महत्वपूर्ण है - क्योंकि चित्र प्रभावी रूप से शब्दों की तरह काम करेंगे।

Comments

यह मेरा पसंदीदा तरीका है। हालाँकि, यह कभी-कभी सोच सकता है कि अगर मैं बाद में बाल तत्वों के लिए फ़ॉन्ट आकार को परिभाषित करना भूल जाता हूं तो पाठ क्यों नहीं दिख रहा है।

— Astrotim

Answer 2

क्षमा करें यदि यह पुराना है, लेकिन मुझे अभी एक समाधान मिला है।

font-size0. पर सेट करने का प्रयास करें । इस प्रकार चित्रों के बीच की सफेद-रिक्तियाँ 0 चौड़ाई में हो जाएंगी, और छवियां प्रभावित नहीं होंगी।

पता नहीं कि यह सभी ब्राउज़रों में काम करता है, लेकिन मैंने इसे क्रोमियम और कुछ <li>तत्वों के साथ आज़माया display: inline-block;।

Comments

मैं मैक ओएसएक्स पर फ़ायरफ़ॉक्स और सफारी, साथ ही क्रोम में इस काम की पुष्टि कर सकता हूं। मुझे विश्वास नहीं हो रहा है कि यह शीर्ष उत्तर नहीं है। क्या एक महान विचार है, केवल एक ही जो मुझे लगता है कि वास्तव में प्रश्न का उत्तर देता है / प्रश्नकर्ता को देता है कि वे क्या देख रहे हैं।

— डग

सिवाय इसके कि यह emइकाइयों का उपयोग करने वाले लेआउट को तोड़ देगा ।

— devius

font-size0 पर सेट करने का मतलब है कि आप emउस बिंदु के बाद स्केलेबल डिज़ाइन के लिए यूनिट का उपयोग नहीं कर सकते । कुछ लोगों के लिए, यह जवाब बेकार है।

— LB--

मैं अपने पृष्ठ पर क्रिस कॉयियर के विश्लेषण की जाँच करूँगा, "जब यह काम नहीं कर सकता है तो अन्य उदाहरणों पर कुछ विवरणों के लिए" फ़ॉन्ट का आकार शून्य पर सेट करें "अनुभाग के तहत: css-tricks.com/fighting-the-space-between -लाइन-ब्लॉक-एलिमेंट्स

— क्रिस केम्पेन

: और अब है कि हम flexbox है, यह सब अब :) अंत में अच्छा नये नोट्स की आवश्यकता नहीं है css-tricks.com/snippets/css/a-guide-to-flexbox

— opatut

Answer 3

आप टिप्पणियों का उपयोग कर सकते हैं।

 <img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="...">

मैं छवियों की एक श्रृंखला होने के शब्दार्थ के बारे में चिंता करूंगा।

Comments

अच्छा विचार। चित्र सजावट के लिए हैं - क्या यह शब्दार्थ है?

— स्किलड्रिक

सजावटी चित्र CSS में हैं, HTML में नहीं!

— कोनराड रुडोल्फ

यह निर्भर करता है कि चित्र कितने सजावटी हैं। एक सुंदर सीमा? यह CSS में होना चाहिए। उड़ान के बारे में एक साइट पर हवाई जहाज की छोटी तस्वीरों की एक श्रृंखला? संभवत: बिना किसी पाठ संतुलन के आवश्यक सामग्री।

— क्वेंटिन

@ MihaiAlexandruBîrsan - font-size:0कई मामलों में भयानक है क्योंकि आप विरासत को ढीला करते हैं। हां, आप remइकाइयों का उपयोग कर सकते हैं , लेकिन फिर भी, आपके मीडिया के प्रश्न उस तत्व के लिए कार्य करना बंद कर देंगे, और आपको उन सभी को संशोधित करना होगा

— vsync

मैंने बस इस छोटी सी तरकीब को खोजा, फिर आपका जवाब देखा। थोड़ा सा cruft लेकिन HTML को रखने के लिए एक लंबा रास्ता जाता है जो सभी को एक लंबी पंक्ति में नहीं बनाते हैं।

— निक बेडफोर्ड

Answer 4

आपके पास CSS के साथ लगभग सामान किए बिना दो विकल्प हैं। पहला विकल्प है कि टैग से व्हॉट्सएप-केवल बच्चों को हटाने के लिए जावास्क्रिप्ट का उपयोग करना। एक अच्छा विकल्प हालांकि इस तथ्य का उपयोग करना है कि व्हाट्सएप एक अर्थ होने के बिना टैग के अंदर मौजूद हो सकता है। इस तरह:

<div id="[divContainer_Id]"
    ><img src="[image1_url]" alt="img1"
    /><img src="[image2_url]" alt="img2"
    /><img src="[image3_url]" alt="img3"
    /><img src="[image4_url]" alt="img4"
    /><img src="[image5_url]" alt="img5"
    /><img src="[image6_url]" alt="img6"
/></div>

Comments

मैं वास्तव में इस शैली को पसंद करता हूं। हाँ यह बदसूरत है, लेकिन इसके लिए कोई सीएसएस हैक की आवश्यकता नहीं है जिसके सभी प्रकार के दुष्प्रभाव हो सकते हैं।

— स्टिज डे विट

Answer 5

Flexbox आसानी से इस पुरानी समस्या को ठीक कर सकता है:

.image-wrapper {
  display: flex;
}

Flexbox के बारे में अधिक जानकारी: https://css-tricks.com/snippets/css/a-guide-to-xlexx/

Comments

आजकल फ्लेक्सबॉक्स सबसे साफ और आसान उपाय है। मुझे लगता है कि यह यहां शीर्ष उत्तर होना चाहिए। { flex-direction: row; flex-wrap: nowrap; }अधिक पठनीयता के लिए जोड़ा जा सकता है।

— राबर्ट कुज़्नियर

यह सबसे अच्छा आधुनिक उत्तर है

— Nate

@RobertKusznier मैं निर्दिष्ट करने से असहमत हूं flex-direction: rowऔर flex-wrap: nowrap, वे वैसे भी डिफ़ॉल्ट हैं। यह सरल रखें आमतौर पर सबसे अच्छा है! इसके अलावा, अधिकांश बार उपयोगकर्ता वास्तव में चाहते हैं flex-wrap: wrap।

— मार्क .377

Answer 6

बहुत अधिक शोध, परीक्षण और त्रुटि के बाद मुझे एक ऐसा तरीका मिला जो ठीक काम करता है और इसे बच्चों के तत्वों पर मैन्युअल रूप से फ़ॉन्ट आकार को फिर से सेट करने की आवश्यकता नहीं है, जिससे मुझे पूरे डॉक्स में एक मानकीकृत एम फ़ॉन्ट आकार मिल सके। ।

फ़ायरफ़ॉक्स में यह काफी सरल है, बस word-spacing: -1emमूल तत्व पर सेट किया गया है। किसी कारण से, क्रोम इसे अनदेखा करता है (और जहाँ तक मैंने परीक्षण किया है, यह मूल्य की परवाह किए बिना शब्द रिक्ति को अनदेखा करता है)। इसलिए इसके अलावा मैं letter-spacing: -.31emमाता-पिता और letter-spacing: normalबच्चों को जोड़ता हूं । एम का यह अंश अंतरिक्ष का आकार है केवल यदि आपके ईएम का आकार मानकीकृत है । बदले में, फ़ायरफ़ॉक्स, पत्र-रिक्ति के लिए नकारात्मक मूल्यों की उपेक्षा करता है, इसलिए यह इसे शब्द रिक्ति में जोड़ नहीं देगा।

मैंने इसे फ़ायरफ़ॉक्स 13 (जीत / ubuntu, 14 पर एंड्रॉइड), Google क्रोम 20 (जीत / ubuntu), एंड्रॉइड ब्राउज़र पर आईसीएस 4.0.4 और IE 9. पर परीक्षण किया और मुझे यह कहने के लिए लुभाया गया कि यह सफारी पर भी काम कर सकता है, लेकिन मैं वास्तव में नहीं जानता ...

यहाँ एक डेमो http://jsbin.com/acucam है

Comments

यह मेरी पेशेवर राय में, सबसे अच्छा समाधान है। मैंने इसे डेस्कटॉप पर सफारी 5 और 6 के साथ-साथ एक दूसरे जीन आईपैड पर मोबाइल सफारी का परीक्षण किया। यह तब काम करता है, जब एक बच्चे में पत्र-रिक्ति को रीसेट करते समय आपको शब्द-रिक्ति शामिल करने की आवश्यकता होती है: सामान्य; सफारी के रूप में यह सम्मान। बढ़िया काम, फ्लैटलाइन!

— hndcrftd

word-spacing: -1emशैली क्रोम के वर्तमान संस्करण में शब्द ओवरलैप बनाने के लिए लगता है।

— सैम

@Sam को अविश्वसनीय रूप से लंबे समय तक देरी के लिए खेद है: PI ने शब्द-रिक्ति को 0.05 में बदल दिया, ऐसा लगता है कि फ़ायरफ़ॉक्स के नए संस्करण उस विशेषता के बारे में कम परवाह नहीं कर सकते हैं, पत्र-रिक्ति के साथ पर्याप्त है। मैं अभी उबंटू में हूं, इसलिए मैंने खिड़कियों पर इसका परीक्षण नहीं किया है। यहाँ अपडेट किया गया संस्करण jsbin.com/acucam/14

— Flatline

क्या आपने अलग-अलग फोंट के साथ यह कोशिश की? यह अविश्वसनीय रूप से अपरंपरागत और बहुत लगता है, बहुत टूटने की संभावना है।

— दुबेवाद

Answer 7

मैं बहुत देर हो चुकी हूँ (मैं सिर्फ एक सवाल पूछा और संबंधित अनुभाग में पतली मिल), लेकिन मुझे लगता है कि प्रदर्शन: टेबल-सेल; एक बेहतर उपाय है

<style>
img {display:table-cell;}
</style>

<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">

एकमात्र समस्या यह है कि यह IE 7 और पिछले संस्करणों पर काम नहीं करेगा, लेकिन एक हैक के साथ इसे ठीक कर सकता है

Comments

यह अच्छा है, लेकिन केवल दोष यह है कि तत्व फ्लोट सेंटर की उनकी क्षमता को ढीला कर देते हैं यदि उनके पास अभिभावक पाठ-संरेखित हो: केंद्र;

— म्लाडेन जैन्जेटोविक

काम करता है, लेकिन अगर आप केवल टेक्स्ट-संरेखण के साथ img के दाईं ओर संरेखित करना चाहते हैं: सही (माता-पिता पर और फ्लोट के बिना) - समाधान दुख की बात नहीं है।

— Herr_Hansen

काम हो सकता है, लेकिन कुछ स्क्रीन्रेडर्स display: table-*शब्दार्थ की व्याख्या करते हैं और पढ़ते हैं जैसे कि उपयोगकर्ता एक मेज पर नेविगेट कर रहे थे।

— तारका

Answer 8

निम्नलिखित कोड की तरह इस समस्या को हल करने के लिए CSS स्टाइलशीट का उपयोग करें।

[divContainer_Id] img
{
    display:block;
    float:left;
    border:0;
}

alt text http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtorCjvzL6bK7skG8QKMRNWWN5N5/5/7/5x7/5447/5&vs&hl=hi

फ़ायरफ़ॉक्स 3.5 अंतिम पर परीक्षण!

पुनश्च। आपका html ऐसा होना चाहिए।

<div id="[divContainer_Id]">
    <img src="[image1_url]" alt="img1" />
    <img src="[image2_url]" alt="img2" />
    <img src="[image3_url]" alt="img3" />
    <img src="[image4_url]" alt="img4" />
    <img src="[image5_url]" alt="img5" />
    <img src="[image6_url]" alt="img6" />
</div>

Comments

उन्होंने कहा "पंक्ति", "कॉलम" नहीं और आपका HTML उदाहरण अमान्य है।

— क्वेंटिन

वह 'कॉलम' में कई छवियों वाली एकल पंक्ति चाहता है। यह उत्तर वास्तव में समस्या को हल करता है, हालांकि "प्रदर्शन: ब्लॉक" बेमानी है।

— बॉबी जैक

Answer 9

क्या मैं उन दोनों के बजाय टैग के बीच में ब्रेक के अलावा कुछ कर सकता हूं?

ज़रुरी नहीं। चूंकि <img>इनलाइन तत्व हैं, इसलिए इन तत्वों के बीच रिक्त स्थान HTML रेंडरर द्वारा पाठ में सही स्थान के रूप में माना जाता है - निरर्थक रिक्त स्थान (और लाइन ब्रेक) को छोटा किया जाएगा, लेकिन एकल स्थान होगा पाठ तत्व के वर्ण डेटा में डाला ।

<img>टैग्स को पूरी तरह से पोजिशन करने से इसे रोका जा सकता है, लेकिन मैं इसके खिलाफ सलाह दूंगा क्योंकि इसका मतलब होगा प्रत्येक इमेज को मैन्युअल रूप से कुछ पिक्सेल माप से जो कि बहुत काम आ सकता है।

Answer 10

एक और उपाय रिक्त स्थान के स्थानों में अपरंपरागत लाइन ब्रेक का उपयोग करना होगा। यह पहले जोड़े के उत्तर के समान है, और तत्वों को अस्तर करने का एक वैकल्पिक तरीका है। यह एक सुपर-एज-ऑप्टिमाइज़ेशन तकनीक भी है क्योंकि यह आपके मार्कअप में रिक्त स्थान की जगह लेती है।

<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">

ध्यान दें कि उस कोड में कोई जगह नहीं है। वे स्थान जहां HTML में सामान्य रूप से उपयोग किए जाने वाले स्थानों को कैरिज रिटर्न के साथ बदल दिया जाता है। यह टिप्पणियों का उपयोग करने और पॉल डे व्रीज़ की तरह व्हाट्सएप का उपयोग करने की तुलना में कम क्रिया है।

इस दृष्टिकोण के लिए Tech.co को श्रेय।

Answer 11

सफेद-अंतरिक्ष: प्रारंभिक; मेरे लिये कार्य करता है।

Answer 12

तत्वों के बीच व्हाट्सएप को केवल विज़ुअल फॉर्मेटिंग उद्देश्यों के लिए HTML संपादक द्वारा रखा जाता है। आप व्हाट्सएप को हटाने के लिए jQuery का उपयोग कर सकते हैं:

$("div#MyImages").each(function () {

    var div = $(this);
    var children= div.children();
    children.detach();
    div.empty();
    div.append(children);

});

यह बाल तत्वों को अलग करता है, किसी भी व्हाट्सएप को साफ करता है जो बाल तत्वों को फिर से जोड़ने से पहले रहता है।

इस प्रश्न के अन्य उत्तरों के विपरीत, इस पद्धति का उपयोग करना सुनिश्चित करता है कि विरासत में मिली सीएसएस displayऔर font-sizeमूल्यों को बनाए रखा गया है। इसके बाद उपयोग करने की आवश्यकता नहीं है floatऔर बोझिल होने की clearआवश्यकता है। बेशक, आपको jQuery का उपयोग करने की आवश्यकता होगी।

Comments

हालांकि यह समाधान काम करता है। मुझे लगता है कि जावास्क्रिप्ट के साथ व्हाट्सएप को हटाने के लिए यह ओवरकिल है।

— लशै

क्षमा करें, लेकिन uggghhhh ... किसी को HTML को पहली बार ठीक से कोड करने का लक्ष्य रखना चाहिए, न कि इस तथ्य के बाद JS के साथ मैंगल करना। उत्तरार्द्ध सिर्फ इस विचार के साथ मैला व्यवहार को प्रोत्साहित करता है कि जेएस का [खांसी] चमत्कार इसे बाद में ठीक कर सकता है।

— अंडरस्कोर_ड

Answer 13

व्यक्तिगत रूप से मुझे यह स्वीकार करना पसंद है कि ऐसा करने का कोई सटीक तरीका नहीं है, न कि किसी रूप की चाल का उपयोग करके।

मेरे लिए, यह कई बार परेशान करने वाला मुद्दा होता है, जिससे आप एक घंटे का समय बर्बाद कर सकते हैं, यह सोचकर कि क्यों चेक बॉक्स की एक पंक्ति को सभी के लिए सही ढंग से संरेखित नहीं किया गया है .. इसलिए मुझे एक त्वरित गूगल करना होगा और अगर सीएसएस नियम होता है कि मुझे याद नहीं है ... लेकिन लगता है कि नहीं :(

अगले सबसे अच्छे उत्तर के लिए, फ़ॉन्ट-आकार का उपयोग करने के लिए ... मेरे लिए यह एक बुरा हैक है जो आपको बाद में सोचता है कि आपका पाठ क्यों नहीं दिख रहा है।

मैं आमतौर पर PHP के साथ बहुत कुछ विकसित करता हूं और जहां मैं चेक बॉक्स का ग्रिड उत्पन्न कर रहा हूं, उसके मामले में, PHP उत्पन्न सामग्री इस समस्या को हटा देती है क्योंकि यह कोई रिक्ति / ब्रेक सम्मिलित नहीं करता है।

बस, मेरा सुझाव है कि या तो सभी छवियों को एक साथ एक ही लाइन पर होने या सामग्री / छवियों को उत्पन्न करने के लिए एक सर्वर साइड स्क्रिप्ट का उपयोग करने का सुझाव दें।

Answer 14

तत्वों के बीच एक सीआर / एलएफ को हटाने के लिए उपयोग करने के बजाय, मैं एसजीएमएल प्रसंस्करण निर्देश का उपयोग करता हूं क्योंकि मिनिफ़ायर अक्सर टिप्पणियों को हटाते हैं, लेकिन एक्सएमएल पीआई नहीं। जब PHP PI को PHP द्वारा संसाधित किया जाता है, तो इसके बीच में CR / LF के साथ पूरी तरह से PI को हटाने का अतिरिक्त लाभ होता है, इस प्रकार कम से कम 8 बाइट्स की बचत होती है। आप किसी भी मनमाने ढंग से मान्य निर्देश नाम का उपयोग कर सकते हैं जैसे कि X (HT) ML में दो बाइट्स बचा सकते हैं।

Answer 15

क्वेंटिन के जवाब से प्रेरित होकर , आप अगले टैग की शुरुआत के आगे समापन> को भी रख सकते हैं।

 <img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."/>

Answer 16

शब्दार्थ, क्या यह एक क्रमबद्ध या अव्यवस्थित सूची का उपयोग करना सबसे अच्छा नहीं होगा और फिर इसे सीएसएस का उपयोग करके उचित रूप से स्टाइल करना होगा?

<ul id="[UL_ID]">
    <li><img src="[image1_url]" alt="img1" /></li>
    <li><img src="[image2_url]" alt="img2" /></li>
    <li><img src="[image3_url]" alt="img3" /></li>
    <li><img src="[image4_url]" alt="img4" /></li>
    <li><img src="[image5_url]" alt="img5" /></li>
    <li><img src="[image6_url]" alt="img6" /></li>
</ul>

CSS का उपयोग करते हुए, आप इसे अपनी इच्छानुसार स्टाइल कर सकते हैं और किताबों के व्हाट्सएप को हटा सकते हैं।

Comments

चित्रों को सूची वस्तुओं में रखने से श्वेत स्थान पर कोई प्रभाव नहीं पड़ता है, भले ही यह अधिक अर्थपूर्ण हो।

— खतरनाक