溢出包装：断字未按预期工作

时间：2021-07-15 17:48:37

标签： css

我有一个问题 div，其中包含一个带有一些文本的问题文本 div。如果一个单词太长，它会像这样弄乱格式：

enter image description here

我尝试使用溢出包装：断字；在问题文本上，但这似乎使问题变得更糟：

enter image description here

是我的语法错误，还是有其他问题？这是我的 HTML 和 CSS：

    <div id="screen" , class="screen">
        <div id="menu_bar" , class="menu-bar">
            <div id="logo" , class="logo">
                <img src="logo.png" />
            </div>
            <div id="title" , class="title">Title</div>
            <div id="menu_button" , class="menu-button">
                <img src="menu.png" />
            </div>
        </div>
        <div id="display" , class="display">
            <div id="speech_bubble" , class="speech-bubble">
                <div id="logo_animation" , class="logo-animation"><img src="https://media2.giphy.com/media/E0SE1bDv0sTbCH4p6V/giphy.gif?cid=790b761143fe1cebe2466c26bfb82fc6b178eb7ecad3874e&rid=giphy.gif"/></div>
                <div id="question" class="question resize">
                   <div id="question_text" class="question-text">
                    <span>Test text</span>
                   </div> 
                    </div>
                <div id="speech_bubble_middle_bar" class="speech-bubble-middle-bar">
                    <input type="text" id="input-text" class="input-text" />
                </div>
                <div id="speech_bubble_bottom_bar" class="speech-bubble-bottom-bar">
                    <div id="left_button_container" class="left-button-container">
                        <button id="left_button" class="button resize">Wow!</button>
                    </div>
                    <div id="right_button_container" class="right-button-container">
                        <button id="right_button" class="button resize">Next</button>
                    </div>
                </div>
            </div>
            <div id="bottom_bar" , class="bottom-bar">
                <div id="character" , class="character">
                </div>
                <div id="bottom_display" , class="bottom-display">
                    <div id="answers_display" , class="answers-display">
                        <div id="answer_container_1" , class="answer-button-1">
                            <div id="answer_checkbox_1" , class="checkbox">
                            </div>
                            <div id="answer_button_container_1" , class="answer-button-container">
                                <button id="answer_button_1" , class="button pushable resize">
                                    <span class="front">Button 1</span>
                                </button>
                            </div>
                        </div>
                        <div id="answer_container_2" , class="answer-button-2">
                            <div id="answer_checkbox_2" , class="checkbox">
                            </div>
                            <div id="answer_container_2" , class="answer-button-container">
                                <button id="answer_button_2" , class="button pushable resize">
                                    <span class="front">Button 2</span>
                                </button>
                            </div>
                        </div>
                        <div id="answer_container_3" , class="answer-button-3">
                            <div id="answer_checkbox_3" , class="checkbox">
                            </div>
                            <div id="answer_container_3" , class="answer-button-container">
                                <button id="answer_button_3" , class="button pushable resize">
                                    <span class="front">Button 3</span>
                                </button>
                            </div>
                        </div>
                        <div id="answer_container_4" , class="answer-button-4">
                            <div id="answer_checkbox_4" , class="checkbox">
                            </div>
                            <div id="answer_container_4" , class="answer-button-container">
                                <button id="answer_button_4" , class="button pushable resize">
                                    <span class="front">Button 4</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div id="menu_display" , class="menu-display">
                        <div id="menu_container_1" , class="menu-button-1">
                            <div id="menu_button_container_1" , class="menu-button-container">
                                <button id="menu_button_1" , class="button resize">Restart</button>
                            </div>
                        </div>
                        <div id="menu_container_2" , class="menu-button-2">
                            <div id="menu_button_container_2" , class="menu-button-container">
                                <button id="menu_button_2" , class="button resize">Options</button>
                            </div>
                        </div>
                        <div id="menu_container_3" , class="menu-button-3">
                            <div id="menu_button_container_3" , class="menu-button-container">
                                <button id="menu_button_3" , class="button resize">More Info</button>
                            </div>
                        </div>
                        <div id="menu_container_4" , class="menu-button-4">
                            <div id="menu_button_container_4" , class="menu-button-container">
                                <button id="menu_button_4" , class="button resize">Log out</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>

* {
    opacity: 1;
    -webkit-box-sizing: border-box;
    -mo-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    position: fixed;
    height: 100%;
    background-color: #311049;
    font-size: 2vh;
    margin: 0 auto;
}

.screen {
    position: absolute;
    height: 100%;
}

.menu-bar {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    position: relative;
    height: 13.714%;
    width: 100vw;
    top: 0%;
    text-align: center;
}

.logo {
    grid-column: 1/2;
    position: relative;
    height: 100%;
}

.logo img {
    position: absolute;
    height: auto;
    max-height: 95%;
    max-width: 95%;
    left: 50%;
    right: 50%;
    top: 50%;
    bottom: 50%;
    transform: translate(-50%, -50%);
}

.title {
    grid-column: 2/3;
    position: relative;
    color: #f5f5f5;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-family: hack;
    font-size: clamp(2vw, 8vw, 10vh);
    display: flex;
    top: 0%;
}

.menu-button {
    grid-column: 3/4;
    position: relative;
    height: 100%;
}

.menu-button img {
    position: absolute;
    height: auto;
    max-height: 75%;
    max-width: 75%;
    left: 50%;
    right: 50%;
    top: 50%;
    bottom: 50%;
    transform: translate(-50%, -50%);
}

.display {
    position: relative;
    height: 86.286%;
    width: 100vw;
}

.speech-bubble {
    display: grid;
    grid-template-rows: 80% 0% 20%;
    position: relative;
    background-color: #f5f5f5;
    height: 61.8%;
    width: 90vw;
    margin: auto;
    border-radius: 2em;
    z-index: 10;
    padding-bottom: 1em;
}

.speech-bubble:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15vw;
    width: 0;
    height: 0;
    border: 4em solid transparent;
    border-top-color: #f5f5f5;
    border-bottom: 0;
    margin-left: -2em;
    margin-bottom: -2em;
    z-index: -1;
}

.logo-animation {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10%;
    padding-top: 10%;
    padding-left: 10%;
    padding-right: 10%;
    display: none;
}

.logo-animation img {
    height: 100%;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
  }

.question {
    grid-rows: 1/2;
    position: relative;
    font-size: 3vh;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.question-text {
    height: 100%;
    width: 100%;
    overflow: auto;
    overflow-wrap: break-word;
}

.speech-bubble-middle-bar {
    grid-rows: 2/3;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 1%;
    padding-bottom: 1%;
    height: 100%; 
}

.input-text {
    visibility: hidden;
    width: 100%;
    height: 100%;    
    border-radius: 2.5em;
    border: 0.25em solid black;
    padding: 1%; 
    font-size: 2em;
    text-align: center;
}

.speech-bubble-bottom-bar {
    grid-rows: 3/4;
    display: grid;
    grid-template-columns: 50% 50%;
    position: relative;
    width: 100%;
}

.left-button-container {
    position: absolute;
    height: 100%;
    width: 38.2%;
    left: 0%;
    margin-left: 1em;
}

.left-button-container button {
    width: 100%;
}

.right-button-container {
    position: absolute;
    height: 100%;
    width: 38.2%;
    right: 0%;
    margin-right: 1em;
}

.right-button-container button {
    width: 100%;
}

.bottom-bar {
    display: grid;
    grid-template-columns: 38.2% 61.8%;
    position: relative;
    height: 38.2%;
    width: 100vw;
    bottom: 0%;
}

.character {
    grid-columns: 1/2;
    position: relative;
    background-image: url('character.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: center;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 3em;
}

.character img {
    position: absolute;
    max-height: 80%;
    max-width: 90%;
    bottom: 0%;
    margin-left: 4%;
    margin-right: 4%;
}

.bottom-display {
    grid-columns: 2/3;
    position: relative;
    height: 100%;
    padding-right: 5vw;
    padding-top: 1%;
    padding-bottom: 3%;
}

.answers-display {
    display: grid;
    gap: 1%;
    height: 99%;
    max-height: 99%;
    grid-template-columns: repeat(auto-fill, minmax(clamp( 28vw, 45vmin, 35vw ), 1fr));
    grid-auto-rows:1fr;
    height:100%;
    display: none;
}

.menu-display {
    display: grid;
    grid-auto-rows:1fr;
    grid-template-columns: repeat(auto-fill, minmax(clamp( 28vw, 45vmin, 35vw ), 1fr));
    height: 100%;
    gap: 1%;
    display: none;
}

.answer-button-1 {
    grid-rows: 1/2;
    display: grid;
    grid-template-columns: 20% 80%;
    height: 98%;
}

.answer-button-2 {
    grid-rows: 2/3;
    display: grid;
    grid-template-columns: 20% 80%;
    height: 98%;
}

.answer-button-3 {
    grid-rows: 3/4;
    display: grid;
    grid-template-columns: 20% 80%;
    height: 99%;
}

.answer-button-4 {
    grid-rows: 4/5;
    display: grid;
    grid-template-columns: 20% 80%;
    height: 99%;
}

.checkbox {
    grid-columns: 1/2;
    max-height: 90%;
    background-image: url('checkbox_unchecked.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: none;
}

.answer-button-container {
    grid-columns: 2/3;
    padding-left: 5%;
    height: 100%;
}

.answer-button-container button {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
}

.menu-button-container button {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
}

.menu-button-container {
    padding-left: 5%;
    height: 100%;
}

.menu-button-1 {
    grid-rows: 1/2;
    height: 98%;
}

.menu-button-2 {
    grid-rows: 2/3;
    height: 98%;
}

.menu-button-3 {
    grid-rows: 3/4;
    height: 99%;
}

.menu-button-4 {
    grid-rows: 4/5;
    height: 99%;
}

.button {
    position: relative;
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: #311049; /*Button Color*/
    color: #f5f5f5;
    font-family: hack;
    font-size: 1.5rem;
    font-size: min(6vw, clamp(1rem, 4.5vh, 4rem));
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0.1em 0.2em black;
    transition: 0.2s;
}

.button:hover:active {
    transition: 0.1s;
    box-shadow: 0.01em 0.02em black;
    transform: translate(0.05em, 0.1em);
}
.button:hover {
    box-shadow: 0.06em 0.12em black;
    transform: translate(-0.01em, -0.02em);
}

.left-btn::after {
    display: block;
    color: #f5f5f5;
    line-height: 0.5em;
    content: "\2190";
}

.right-btn::after {
    display: block;
    color: #f5f5f5;
    line-height: 0.5em;
    content: "\2192";
}

.fade {
    opacity: 0;
}

0 个答案:

没有答案
相关问题
最新问题