(HTML)Надо текст сделать перенос на новую строку чтобы поместилься в поле select по ширине / HTML, JavaScript, VBScript, CSS

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (HTML)Надо текст сделать перенос на новую строку чтобы поместилься в поле select по ширине

5 сообщений из 5, страница 1 из 1

(HTML)Надо текст сделать перенос на новую строку чтобы поместилься в поле select по ширине

#39945822

SMART_001

Гость

Добрый день! Я столкнулся с вопросами, помогите решить))) Я попробую объяснить коротко суть вопроса. Итак,

установил ширину поля select, но список Длинный текст, который самостоятельно не помещается в поле по ширине

но выпадающий список подтягивается из БД

Как можно текст сделать перенос на новую строку чтобы поместилься в поле select по ширине???

Буду признателен если поможете!!!

...

Рейтинг:

0 / 0

10.04.2020, 13:29

| Ответить | Цитировать | Написать

(HTML)Надо текст сделать перенос на новую строку чтобы поместилься в поле select по ширине

#39945942

SQLPowerUser

Участник

Откуда: ссылка в профиле

Сообщения: 277

Рейтинг: 0 / 0

SMART_001,

можно посмотреть в сторону Select2

Или такой велосипед:

Код: html

1.
2.
3.
4.
5.
6.
7.

        <div class="wrap-dropdown">
            <select class="wrap-dropdown__select">
                <option>Руководитель департамента бизнес-консалтинга
                <option>Ещё один длинный пункт в этом списке
            </select>
            <span class="wrap-dropdown__span"></span>
        </div>

Код: css

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

*, *:before, *:after {box-sizing: border-box; outline: 0;}

.wrap-dropdown, .wrap-dropdown__select, .wrap-dropdown__span {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 37px;
}
.wrap-dropdown__select {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.wrap-dropdown__span {
    z-index: -1;
    overflow: hidden;
    padding: 0 18px 0 1px;
    border: 1px solid #ccc;
}
.wrap-dropdown__span:before {
    position: absolute;
    content: "";
    width: 18px;
    height: 100%;
    top: 0;
    right: 0;
    border-left:1px solid #ddd;
    background: #eee;
}
.wrap-dropdown__span:after {
    position: absolute;
    content: "";
    top: 15px;
    right: 5px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #888;
}

Код: javascript

1.
2.
3.
4.
5.
6.
7.
8.
9.

    function qs(el, s) { return el.querySelector(s); }

    const select1 = qs(document,'.wrap-dropdown__select');
    select1.selectedIndex = -1;
    select1.addEventListener('change', writeValue);

    function writeValue() {
        qs(this.parentElement,'span').textContent = this.value;
    }

...

Рейтинг:

0 / 0

10.04.2020, 17:31

| Ответить | Цитировать | Написать

(HTML)Надо текст сделать перенос на новую строку чтобы поместилься в поле select по ширине

#39946292

SMART_001

Гость

SQLPowerUser, где я ошибься?

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
*, *:before, *:after {box-sizing: border-box; outline: 0;}

.wrap-dropdown, .wrap-dropdown__select, .wrap-dropdown__span {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 37px;
}
.wrap-dropdown__select {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.wrap-dropdown__span {
    z-index: -1;
    overflow: hidden;
    padding: 0 18px 0 1px;
    border: 1px solid #ccc;
}
.wrap-dropdown__span:before {
    position: absolute;
    content: "";
    width: 18px;
    height: 100%;
    top: 0;
    right: 0;
    border-left:1px solid #ddd;
    background: #eee;
}
.wrap-dropdown__span:after {
    position: absolute;
    content: "";
    top: 15px;
    right: 5px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #888;
}
</script>
<script>
 function qs(el, s) { return el.querySelector(s); }

    const select1 = qs(document,'.wrap-dropdown__select');
    select1.selectedIndex = -1;
    select1.addEventListener('change', writeValue);

    function writeValue() {
        qs(this.parentElement,'span').textContent = this.value;
    } 
</script>
  <title>Пример веб-страницы</title>
 </head>
 <body>
  <h1>Пример</h1>
   <div class="wrap-dropdown">
            <select class="wrap-dropdown__select">
                <option>Руководитель департамента бизнес-консалтинга
                <option>Ещё один длинный пункт в этом списке
            </select>
            <span class="wrap-dropdown__span"></span>
        </div>
 </body>
</html>

...

Рейтинг:

0 / 0

12.04.2020, 05:33

| Ответить | Цитировать | Написать

(HTML)Надо текст сделать перенос на новую строку чтобы поместилься в поле select по ширине

#39946296

voraa

Гость

SMART_001

SQLPowerUser, где я ошибься?

Классы CSS должны быть в тегах <style></style>

Код: css

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

<style>
*, *:before, *:after {box-sizing: border-box; outline: 0;}

.wrap-dropdown, .wrap-dropdown__select, .wrap-dropdown__span {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 37px;
}
.......
.wrap-dropdown__span:after {
    position: absolute;
    content: "";
    top: 15px;
    right: 5px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #888;
}
</style>

Ну еще совет - не надо
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">

Для HTML5 просто
<!DOCTYPE>

...

Рейтинг:

0 / 0

12.04.2020, 07:53

| Ответить | Цитировать | Написать

(HTML)Надо текст сделать перенос на новую строку чтобы поместилься в поле select по ширине

#39946297

voraa

Гость

SMART_001,
Еще важный момент
<script>... </script>
Либо надо поставить перед </body>
Либо ту часть, которая обращается к элементам html выполнять только после загрузки страницы.
Вот так

Код: javascript

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

<script>
function qs(el, s) { return el.querySelector(s); }
function writeValue() {
	qs(this.parentElement,'span').textContent = this.value;
} 
document.addEventListener('DOMContentLoaded', () => {
    const select1 = qs(document,'.wrap-dropdown__select');
    select1.selectedIndex = -1;
    select1.addEventListener('change', writeValue);
})
</script>

...

Рейтинг:

0 / 0

12.04.2020, 08:11

| Ответить | Цитировать | Написать

5 сообщений из 5, страница 1 из 1

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&tid=1443482]:	0ms
get settings:	9ms
get forum list:	14ms
check forum access:	3ms
check topic access:	3ms
track hit:	168ms
get topic data:	11ms
get forum data:	2ms
get page messages:	38ms
get tp. blocked users:	1ms
others:	12ms

total:	261ms