溢出包装不会破坏动态添加的 div 上的单词

Posted 2023-05-08

【中文标题】溢出包装不会破坏动态添加的 div 上的单词

【英文标题】：overflow-wrap not breaking word on dynamically added div

【发布时间】：2018-06-11 06:06:07

【问题描述】：

配方的成分通过 API Ajax 调用动态添加到 div。每一行文本都保留在一行上，这意味着它不会中断并换行到下面的行。我尝试过通过 CSS 样式类添加分词和溢出包装，然后动态添加该类。我没有任何变化。顺便说一句，我的要点也不会出现在每个成分行的前面。

我确实在我的主要 CSS 样式表上方附加并链接了一个 CSS 重置样式表。

https://imgur.com/a/i0ZJc - 截图

javascript

$( document ).ready(function()

function recipeSearch(foodtype)
var searchTerm = $(this).attr("data-name");
var queryURL = "https://api.edamam.com/search?q=" + foodtype + "&app_id=c13467eb&app_key=9cd5b15a4c49f23093c8fe1f1d2c7ce4"

$.ajax(
      url: queryURL,
      method: "GET"
    )
    .done(function(response) 
        console.log(response);


        for (var k = 0; k<10; k++)
            var foodDiv = $("<div class = 'recipeCard'>");


                if (response.hits.length === 0) 
                    $("#recipeOutput").append("<p>" + "Please enter valid recipe ingredient or name." + "</p>");
                ;

            var recipeName = response.hits[k].recipe.label;
            var pOne = $("<p>").html("<h2>" + recipeName + "</h2>");
            foodDiv.append(pOne);

            var recipePic = response.hits[k].recipe.image;
            var pTwo = $("<img class='recipeImage'>").attr("src", recipePic);
            foodDiv.append(pTwo);

            var recipeURL = response.hits[k].recipe.shareAs;
            var pThree =$("<p>").html("<a target='_blank' href='" + recipeURL + "'>" + "Get full recipe here" + "</a>");
            foodDiv.append(pThree);

            var length = response.hits[k].recipe.ingredients.length;

            var ingList = $("<ul>");
            for (var i = 0; i < length; i++)

                var ing = response.hits[k].recipe.ingredients[i].text;
                var pFour = $("<li class='loopText wordBreak'>").text(ing);
                ingList.append(pFour);
            ;
            foodDiv.append(ingList);

            var health = response.hits[k].recipe.healthLabels;
            var pFive = $("<p>").text(health);
            foodDiv.append(pFive);

            $("#recipeOutput").append(foodDiv);
        

    );
;


function clear()
    $("#recipeOutput").empty();


$("#recipeSearch").on("click", function(event)
   var foodtype = $("#recipeInput").val().trim();
   clear();
   recipeSearch(foodtype);
   return false;
);
);

$("#recipeInput").keyup(function(event) 
if (event.keyCode === 13) 
    $("#recipeSearch").click();

);

CSS

li.loopText 
    display: block;
    overflow-wrap: break-all;
    padding: 2px;
    margin 1px auto;
    list-style-type: circle;

label 
    color: white;

wordBreak 
    overflow-wrap: break-word;

HTML

        <div class="col s12 m12 l6 xl6">
            <div class=" panel-boxes">
                <div class="panel-heading">WHAT WOULD YOU LIKE TO COOK?</div>
                <div class="panel-body">
                    <div class="form-group">
                        <input type="text" class="form-control" id="recipeInput">
                        <button type="search" class="btn" id="recipeSearch" style="margin-right: 20px; margin-left: 15px">Search</button>
                    </div>  
                    <div class="panel-body recipesContainer" id="recipeOutput" ></div>
                </div>
            </div>
        </div>

【问题讨论】：

在没有工作页面的情况下很难解决 CSS 问题。您可以链接到 Codepen 或网站托管的其他地方吗？

wbwelch.github.io/DayTripper/stayin.html 这样就够了吗？

我看到一些 js 错误 - Uncaught TypeError: Cannot read property 'recipe' of undefined

【参考方案1】：

对列表项使用li white-space: normal;。

这在 Chrome 和 Safari 中似乎对我有用。 或者，对整个 ul 使用ul white-space: normal;，所有列表项都会继承它。

【讨论】：

效果很好。谢谢！