Гость
Войти | Профиль | Очистить
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (HTML)Надо текст сделать перенос на новую строку чтобы поместилься в поле select по ширине / 5 сообщений из 5, страница 1 из 1
10.04.2020, 13:29
    #39945822
SMART_001
SMART_001
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML)Надо текст сделать перенос на новую строку чтобы поместилься в поле select по ширине
Добрый день! Я столкнулся с вопросами, помогите решить))) Я попробую объяснить коротко суть вопроса. Итак,

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

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

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

Буду признателен если поможете!!!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2020, 17:31
    #39945942
SQLPowerUser
SQLPowerUser
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML)Надо текст сделать перенос на новую строку чтобы поместилься в поле select по ширине
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
| Ответить | Цитировать | Написать  
12.04.2020, 05:33
    #39946292
SMART_001
SMART_001
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML)Надо текст сделать перенос на новую строку чтобы поместилься в поле select по ширине
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, 07:53
    #39946296
voraa
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML)Надо текст сделать перенос на новую строку чтобы поместилься в поле select по ширине
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, 08:11
    #39946297
voraa
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(HTML)Надо текст сделать перенос на новую строку чтобы поместилься в поле select по ширине
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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (HTML)Надо текст сделать перенос на новую строку чтобы поместилься в поле select по ширине / 5 сообщений из 5, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 255ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1443482]:
 0ms
get settings:
 9ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 159ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 42ms
get tp. blocked users:
 1ms
others: 13ms
total:  255ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]