Читаем в оригинале 2 (знакоме слова)
by yiiBoy
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSFiddle Example</title>
<style>
#sentence-container {
word-wrap: break-word;
white-space: normal;
width: 100%;
box-sizing: border-box;
}
#sentence-container span {
margin-right: 5px;
cursor: pointer;
}
#translation-container {
margin-top: 20px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
display: none;
}
#translation-container div {
margin-bottom: 5px;
}
.column {
display: inline-block;
vertical-align: top;
width: 30%;
padding: 10px;
border: 1px solid #ccc;
box-sizing: border-box;
word-wrap: break-word;
}
.column h3 {
word-wrap: break-word;
white-space: normal;
}
.column p {
margin-bottom: 15px; /* Увеличенное расстояние между фразами */
cursor: pointer;
}
.control-panel {
margin-bottom: 20px;
}
#columns-container {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
button.selected-1 {
background-color: lightgreen;
}
button.selected-2 {
background-color: green;
}
button.selected-3 {
background-color: yellow;
}
button.selected-4 {
background-color: orange;
}
button.selected-5 {
background-color: red;
}
.translation {
display: flex;
align-items: center;
}
.translation span {
margin-right: 10px;
}
.translation button {
background-color: red;
color:...