سؤال

واني اسعى لكتابة CSS الذي عندما يكتب المستخدم النص وتجاوزات بدلا من وجود شريط التمرير أو الاختباء، فإنه يذهب فقط بانخفاض مثل في مستند Word عادي أو نحو ذلك. لدي هذا الرمز:

#content-text {
    width: 960px;
    padding-left: 10px;
    padding-right:10px;
    text-align: left;
    color:#000;
    height:100%;
    margin-left: 25px;
    margin-right:25px;
}

والشيء الغريب، هو أنه في حين أن هذا الرمز في الواقع لا ما أريد في IE في فايرفوكس يفيض ويصبح التمرير. لقد حاولت تجاوز: السيارات. إخفاء الفائض؛ وتجاوز: وراثة. فقط لمعرفة ما إذا كان أي ساعد ولكن لم الحظ حتى الآن، ولدي بصراحة لا فكرة لماذا هذا يحدث في فايرفوكس، = / أن أي من هل تعلم؟


تحديث: حاولت مع تجاوز: مرئية. ولكن أنا مجرد الحصول على تجاوز ... مرئية بشكل جيد ولكن لا يزال لا الكتمان. وفقط في فايرفوكس حتى الآن. = /


تحديث: والشيء الآخر الوحيد الذي يمكن أن يؤثر هو أن لدي كود CSS آخر ويرد أولا:

#content-title{
    background-color: transparent;
    background-image: url(../img/content-title-body.png);
    background-repeat: repeat-y;
    background-attachment: scroll;
    background-x-position: 0%;
    background-y-position: 0%;
    height:auto;
    position:absolute;
    z-index :100; /* ensure the content-title is on top of navigation area */
    width:1026px;/*1050px*/
    margin: 160px 100px 5px 100px;
    overflow: visible;
    top: 55px;
}

ووHTML يستخدم هذا هو:

<div id="content-title">
                <div id="content-text">             Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola! 
        </div>
</div>
هل كانت مفيدة؟

المحلول

وهكذا المغلق الخاص بك هو على الأرجح على ما يرام. على سبيل المثال على صفحتي لدي المغلق هو من هذا القبيل:

 textarea.input_field2 {
    margin: 10px 10px 10px 0px;
    width: 440px;
    height: 150px;
    background:#696969; 
    color: white;
    border: none;
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
    }

وبعد ذلك في الجسم أسميها حتى مثل هذا:

 <textarea rows="9" cols="9" class="input_field2" name="user_comments"></textarea>

وأنه يعمل بشكل جيد. ولكن تأكد عند اختباره يمكنك اختبار ذلك مع شيء من هذا القبيل أبجد هوز، كلمات مع مسافات وليس واحدا سلسلة طويلة مثل قضية "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" التي من شأنها فرض شريط التمرير على الأرجح. تحقق أيضا أتش تي أم أل والمغلق ل التحقق من صحة .

نصائح أخرى

ويجب أن يكون هناك المزيد لهذه القصة من أنت تظهر هنا. لقد استخدمت CSS قدم وأرى نفس السلوك في كل من إنترنت إكسبلورر وفايرفوكس. الصفحة يتم تقديم 960 بكسل، وعندما عرض المتصفح هو أقل من ذلك، يتم تقديم شريط التمرير الأفقي.

إذا قمت بتحديد العرض على عنصر، المتصفح لن يجعله أقل من هذه القيمة. إذا قمت بإزالة إعلان العرض من المثال الخاص بك، فإن عنصر تجعل فقط واسعة كما انها تحتاج الى.

إذا لم تكن هذه هي الإجابة التي تبحث عنها، يرجى تقديم مزيد من رموز لتعطينا الصورة الكاملة.

إضافة إلى word-wrap: break-word; #content-text بك

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top