HTML Text wird abgeschnitten?

Hallo,

ich habe ein Problem in HTML und komme nicht mehr weiter.

In meiner Artikelansicht

(https://image.ibb.co/kY3G5S/artikelansicht.png)

wird der Produktname nach zwei Zeilen abgeschnitten und die dritte Zeile nur angedeutet angezeigt. Woran kann dies liegen?

Hat das eventuell etwas mit -webkit-line-clamp zu tun?

{
color: #c80000;
font-weight: bold;
line-height: 1.5;
text-overflow: ellipsis;
white-space: pre-wrap;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}

2 Antworten

number11

Nutzer, der sehr aktiv auf gutefrage ist

im Thema CSS

28.03.2018, 08:30

Schau mal, ob der Fehler mit line-height: auto immer noch kommt.

Alternativ versuch mal: Overflow: auto

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML

28.03.2018, 10:48

Na ja, du sagst Webkit-Browsern mit -webkit-line-clamp:4, dass der Text maximal vier Zeilen haben soll und dann mit … abgeschlossen werden soll. Dein Platz reicht aber nur für zwei Zeilen aus und der Rest wird dann abgeschnitten.

Probiere doch einfach mal etwas rum und versuche bspw. mal nur zwei Zeilen zu setzen.

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Hallo,

ich bin dabei eine kleine Website zu erstellen. (Nicht online) Dabei habe ich mit dem Responsive Webdesign Probleme. Auf dem Smartphone, Tablet, Pc sieht die Seite gut aus. Jedoch, wenn ich das Browser-Fenster kleiner verschiebe, überlappen sich Bilder mit dem Text an einer Stelle. (Der Text ist speziell in Lists unterteilt.)

Hat mir jemand einen Rat? Die Bilder sind in Div-Boxen, der CSS Code dafür sieht ungefähr so aus:

    vertical-align: top;
    margin-right: xy
    margin-top: xy
    float: right;
    width: auto;

...zur Frage

HTML / CSS: Meine div-Box-Breite passt sich automatisch dem Inhalt an?

Wie löse ich das Problem? Die div-Box soll immer die gleiche Breite behalten.

CSS-Code:

.btn-1 {
  text-transform: none;
  cursor: pointer;
  overflow: visible;
  font-family: inherit;
  line-height: inherit;
  padding: 20px 50px;
  color: white;
  background-color: #424242;
  border-color: #fff;
  transition-duration: 0.4s;
  border-radius: 15px !important;
  font-size: 1.3em !important;
  text-rendering: auto;
  word-spacing: normal;
  letter-spacing: normal;
  text-shadow: none;
  align-items: flex-start;
  font: 400 13.3333px Arial;
  border-width: 2px;
  border-style: outset;
  border-image: initial;
}

HTML:

<button data-shoppy-product="hzX6G9S" class="btn-1">Pay 15 €</button>

Unwichtig:

<script src="https://shoppy.gg/api/embed.js"></script>

...zur Frage

HTML und CSS - Box erscheint nach Klick auf Button und verschwindet nach Klick auf Text wieder?

Die Aufgabenstellung lautet:

"Füge der Webseite einen Button hinzu, bei dessen Betätigung eine Box erscheint, die den Text anzeigt: „Diese Funktion ist noch nicht implementiert. Bitte schließen.“

Die Box soll beim Klick auf den Text wieder unsichtbar werden.

Die Box soll ihre Farbe ändern, wenn man mit der Maus darauf fährt."

Einzelne Punkte schaffe ich, aber nicht dass die Box z.B. wieder weg geht wenn man in den Text klickt ...

Freue mich über jede Nachricht!

...zur Frage

Box ohne text <html/CSS>?

Hallo,

ich möchte eine Box also einen quader programmieren mit Rahmen (kein text imput), in den ich später einen Button reingeben und den border-radius möchte ich auch bearbeiten.

Kennt irgendjemand den html code dafür?

Danke im voraus

...zur Frage

Mindmap mit CSS/HTML/Javascripterstellen?

Hey,

Ich suche einen möglichst

einfachen Weg, eine Mindmap, wie auf dem eingefügten Foto, mit Hilfe von HTML und CSS oder auch Javascript zu bauen. Ich bin im Internet zum Thema nicht ziemlich fündig geworden und bin etwas ahnungslos wie ich das ganze angehen könnte. Daher wäre es hilfreich, wenn ihr mir sagt, mit welchen Elementen ich arbeiten und wie ich richtig an die Sache rangehen sollte. Ich hatte erst gedacht, von der Div-Box einfach diese "----" Striche mit white-space:nowrap; zu schreiben und dann mit transform:rotate(70deg) zu drehen und anschließend mit overflow-x:hidden; eine Seite zu verstecken, sodass nur noch eine Sichtbar ist, an die ich dann vorhatte, irgendwie eine Div-box für die Fakten anzuhängen. Allerdings klingt das etwas irrsinnig, hättet ihr daher Ideen?

So sollte das ganze nachher aussehen :)

...zur Frage

HTML Seite verschiebt bei Verkleinerung?

Hallo, ich bin Anfänger was HTML und CSS angeht und habe meine erste Website fürs erste fertig. Nun bin ich beim verkleinern des Windows auf das Problem gestoßen, dass sich die Objekte verschieben und unteranderem auch Überlappen...

Wie kann ich dem entgegen steuern? Gibt es da eine Möglichkeit?

...zur Frage

HTML / CSS: Mein div wird oben abgeschnitten?

https://jsfiddle.net/qkw45jne/1/

Wenn der Bildschirm zu klein wird (in der Höhe), wird das rote div oben teilweise abgeschnitten. Scrollbars kommen aber trotzdem, da die teile drunter vollständig zu sehen bleiben.

Was muss ich ändern, dass auch das rote div immer vollständig da bleibt?

In dem jsfiddle könnt ihr das recht einfach nachstellen, indem ihr die mittlere grenze hoch schiebt. Dann wird irgendwann auch der text im roten div sichtbar:

...zur Frage

CSS in neue Zeile springen?

Hallo,

ich habe ein html Dokument in folgender Form:

<html>
<head>
</head>
<body>
    <div class="Class1">
        <h1 class=user_caption>Caption</h1>
        <section class="name_liste">
            <div class="name blau">
                <h3>hallo</h3>
            </div>
            <div class="name gelb">
                <h3>hallo1</h3>
        
            </div>
            <div class="name grün">
                <h3>hallo2</h3>
                
            </div>
            <div class="name rot">
                <h3>hallo3</h3>
                
            </div>
            <div class="name pink">
                <h3>hallo4</h3>
                
            </div>
            <div class="name weiß">
                <h3>hallo5</h3>
                <div></div>
            </div>
        </section>
</body>
</html>

nur so grob. ich möchte dass blau gelb und grün in einer reihe angezeigt werden und dann darunter rot pink und weiß. Ich habe schon probiert bei grün ein flex-wrap zu machen, aber egal wo ich den wrap versuche, nirgends klappt es. Habe schon überlegt ob es daran liegt, dass die seite faktisch genug platz hat, alle diese container in einer zeile anzuzeigen aber es ist doch irgendwie möglich, diese 6 elemente in 2x3 aufzuteilen.

habe als basis in css zumindest: name_liste { display: inline-flex }

MfG

...zur Frage

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zur Frage

HTML Tag als Text darstellen?

Hallo. Ich möchte den Tag <h1> nicht als Tag darstellen, sondern als Text. Wie geht das und macht man das in HTML selber oder in CSS?

Hintergrund: Ich versuche gerade eine Seite zu schreiben, wo HTML erklärt wird. Dort gibt es dann einen Satz bzw. Absatz, der wie folgt lautet:

"Die Sprache HTML beschreibt, wie der Browser (oder ein anderes Programm, wie z. B. ein Text-Editor) die Auszeichnungen des Textes zu „verstehen“ hat, nicht, wie er sie dann in der Darstellung umsetzt. So besagt <h1> zwar, dass eine Überschrift folgt, nicht aber, in welcher Schriftgröße oder Schriftschnitt diese darzustellen ist – hier haben sich nur gewisse übliche Standardeinstellungen eingebürgert, die aber nicht Teil der HTML-Spezifikation sind."

Das Problem ist nun, dass im zweiten Satz ab <h1> alles danach als Überschrift groß und fett geschrieben wird (und in einer neuen Zeile), weil er das alles, was danach folgt, als "Überschrift" kennzeichnet bzw. tagt. Das will ich aber nicht. Ich will, dass es als normaler Text dargestellt wird und alles danach auch. Wie genau mache ich das?

...zur Frage

<textarea> dynamisch an die Länge des Textes anpassen, ohne Scrollbar und ohne Javascript?

Hallo,

ich möchte die Größe meines textarea der Länge des Textes anpassen. Sprich, ich habe eine orvgegebene Größe und wenn der Text länger wird, wird das Feld automatisch um eine Zeile größer. Da es für die Uni ist, darf ich kein Javascript benutzen, sondern nur HTML, CSS und PHP.

Vielen Dank schonmal!

...zur Frage

HTML gradient in nav bar?

Hallo, ich versuche vergebens eine nav bar zu bauen, welche durch hovern einen gradient freigibt, nicht hinter jedem linkblock soll ein gradient sein, sondern ein 'grosser' hinter allen zsm. Mein ansatz ist bis jetzt dies:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>G&M Barber</title>
  </head>
  <body>
   
        <ul>
            <li><a href="barber.html">Home</a></li>
            <li><a href="barber.html">News</a></li>
            <li><a href="barber.html">Contact</a></li>
            <li><a href="barber.html">About</a></li>
            
        </ul> 
    
</body>
</html>

css:

body {
    background-color: black;
  }
  
  ul {
  background: linear-gradient(90deg, rgba(0, 3, 36, 1) 0%, rgba(121, 9, 118, 1) 47%, rgba(56, 134, 188, 1) 100%);    border-radius: 12px;
    overflow: hidden;
    display: table;
    margin: 0 auto;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  li a {
    display: block;
    color: rgb(255, 255, 255);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background: black;
  }
  
  li a:hover {
    background: transparent;
  }

jedoch sind die Abstände zwischen den li 'boxen' auch gefärbt, wie ändere ich das, oder wie gehe ich das schlauer an?

Vielen Dank schon mal

...zur Frage

Html Bild neben dem Text?

Hi. Wie kann ich in Html ein Bild neben den Text machen ? Also nicht so wie auf dem Bild

dass der Text erst eine Zeile unter dem Bild anfängt?

Entschuldigt bitte meine Formulierungen :-)

...zur Frage

Abgerundete Ecken CSS sind abgeschnitten (Grid-Box)?

Hallo,

ich hab erst vor angefangen HTML und CSS zu lernen und bin jetzt auf folgendes Problem gestoßen:

Ich möchte eine Webseite via CSS-Grid aufteilen und die Boxen jeweils abrunden. Allerdings werden manche Ecken immer abgeschnitten und ich finde nicht den Fehler an was das liegen könnte (siehe Screenshot, ecken rot Markiert). Hier der Code den ich bis jetzt verwende:

.gridbox{
  overflow: hidden;
  width: 99%;
  height: 99%;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas:
      "nav nav nav nav"
      "sidebar main main main"
      "sidebar content1 content2 content3"
      "sidebar footer footer footer";
  grid-gap: 0.4rem;
  border-radius: 1rem;
}

#nav {
  background: #a7ffeb;
  grid-area: nav;
  border-radius: 1rem;
}

#sidebar{
  background: #18ffff;
  grid-area: sidebar;
  border-radius: 1rem;
}


#main {
  background: #84ffff;
  grid-area: main;
  border-radius: 1rem;
}


#content1 {
  background: #6fffd2;
  grid-area: content1;
  border-radius: 1rem;
}


#content2 {
  background: #64ffda;
  grid-area: content2;
  border-radius: 1rem;
}


#content3 {
  background: #73ffbb;
  grid-area: content3;
  border-radius: 1rem;
}


#footer {
  background-color: #1de9b6;
  grid-area: footer;
  border-radius: 1rem;
}

Soweit ich das verstanden habe, spricht man wenn man bei border-radius: 1px 2px 2px 1px; die Ecken einzeln an und bei border-radius: 1rem; alle Ecken.

Danke für Antworten :D

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen